I have the following setup. When I include an export statement in global_constants.jsI get an unexpected token export in content.js.
In popup.js I get an error for unexpected { for the line with my import statement.
And I've tried a bunch of other combinations and I can't seem to get my constants file to be accepted by both popup and content.
global_constants.js
const URL_REGEX = new RegExp("foobar");
popup/popup.html
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="popup.css">
<script type="module" src="../global_constants.js"></script>
<script src="popup.js"></script>
</head>
popup/popup.js
import {URL_REGEX} from '../global_constants';
mainfest.json
"content_scripts": [
{
"js": [
"jquery-3.2.1.min.js", "global_constants.js", "content.js"
Related
My file structure looks like this:
---public(Documentroot folder, where all my css,js, images loads from)
---models
---modules {all my modules customer, db_management e.t.c)
---scripts
|---ivr_builder
|------ui-bootstrap-tpls-0.2.js
--twig_templates {All my ta}
|---layout.twig
In my index.php file, I have this:
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;
require '../vendor/autoload.php';
spl_autoload_register(function ($classname) {
require "../models/" . $classname . ".php";
});
$config['displayErrorDetails'] = false;
$app = new \Slim\App(["settings" => $config]);
$container = $app->getContainer();
// Register component on container
$container['view'] = function ($container) {
$view = new \Slim\Views\Twig(
'/var/www/html/ivr/twig_templates', ['cache' => false]);
$env = $view->getEnvironment();
$lexer = new Twig_Lexer($env, array(
'tag_comment' => array('{#', '#}'),
'tag_block' => array('{%', '%}'),
'tag_variable' => array('[[', ']]'),
'interpolation' => array('#{', '}'),
));
$env->setLexer($lexer);
$loader = new \ Twig_Loader_Filesystem('ivr/scripts/ivr_builder/ui-bootstrap-tpls-0.13.4.js');
$env->getLoader();
return $view;
};
Then in my browser, I get this error:
Name | Status
---------------------------- | ------
angular-aside.js | 200
jquery.js | 200
ui-bootstrap-tpls-0.1.3.4.js | 500
My layout.swig header looks like this:
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% if page_title is defined and page_title is not null ? page_title: 'Log in' %}
{% endif %}
<link rel='stylesheet' href='/css/bootstrap.css'/>
<link rel='stylesheet' href='/js/libraries/angular-aside/angular-aside.css'/>
<link rel="stylesheet" href="/js/libraries/angular-notify-master/styles/css/angular-notify-texture.css" id="notifyTheme">
<link rel='stylesheet' href='/css/ivr_builder.css'/>
<link rel="stylesheet" type="text/css" href="/css/custom.css">
<script type="application/javascript" src="/js/libraries/angular.js"></script>
<script type="application/javascript" src="/js/libraries/angular-animate.min.js"></script>
<script type="application/javascript" src="/scripts/ivr_builder/ui-bootstrap-tpls-0.13.4.js"></script>
<script type="application/javascript" src="/js/libraries/angular-aside/angular-aside.js"></script>
<script type="application/javascript" src="/js/libraries/angular-notify-master/scripts/dist/angular-notify.js"></script>
<script type="application/javascript" src="/js/jquery-ui-1.11.4/external/jquery/jquery.js"></script>
[[top_bar]]
Please any suggestion on how why its not loading please on the browser.
I can easily use xsendfile to load it:
Sending files
Sending a file with xsendfile is very straightforward:
<?php
//We want to force a download box with the filename hello.txt
header('Content-Disposition: attachment;filename=hello.txt');
//File is located at /home/username/hello.txt
header('X-Sendfile: /home/username/hello.txt');
You could omit the first header, in which case the browser would not necessarily show a download file dialog. Also, the X-Sendfile header will not show up in the user’s browser, and they will never see the real location of the file they received.
You will not need to send a Content-Length header, as Apache will take care of that for you. Also found this on Slim:
XSendFile On
XSendFilePath "/path/to/directory/containing/js/files"
And in your Slim application route callback, set the X-SendFile header with the absolute path to a file within the file path specified above:
$app->get('/get-file', function () use ($app) {
$res = $app->response();
$res['X-SendFile'] = '/path/to/directory/containing/js/files/foo.js';
});
I've been following the "let's make a map" tutorial https://bost.ocks.org/mike/map/, however in the middle of the tutorial, drawing the paths failed with errors about topojson.feature() is not a function.
script.js:14 Uncaught TypeError: topojson.feature is not a function(…)
(anonymous function) # script.js:14
(anonymous function) # d3.min.js:6
call # d3.min.js:6
e # d3.min.js:6
script.js:
var width = 960,
height = 1160;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("js/uk.json", function(error, uk) {
if (error) return console.error(error);
console.log(uk);
svg.append("path")
.datum(topojson.feature(uk, uk.objects.subunits))
.attr("d", d3.geo.path().projection(d3.geo.mercator()));
});
HTML included scripts:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Map test</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src='js/jquery.js'></script>
<script src='js/d3.min.js' charset="utf-8"></script>
<script src='js/topojson.js'></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>
Originally I've suspected the issue to be with the topojson file I've converted Pathfile-GeoJSON-TopoJSON, I've names it uk.js for testing purposes while following the tutorial.
Another hint as mentioned in the reply here:
https://github.com/topojson/topojson/issues/236
However after changing the issue remained the same, and confirmed after substituting uk.json I've creted myself with:
https://bost.ocks.org/mike/map/uk.json
You are missing the topojson client files, which have been split off from the base topojson code in v2. If you include the following script in your code, it should work:
<script src="https://unpkg.com/topojson-client#2"></script>
for the first time using angular2 , following the instruction from 5 minute Quickstart guide for angular 2.
everything is working good, means no error while run npm start
npm start image
but when i open
localhost:3000
it show Loading... text which is not expecting. according to this example content of index.html should reflects on this.
in console there is error :
EXCEPTION: TypeError: Cannot set property 'endSourceSpan' of null
main.ts
import { bootstrap } from '#angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: 'My first Angular 2 App</h1>'
})
export class AppComponent {}
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Kindly help me what is going wrong.
I think that you have a problem in the template of your main component. For example a HTML element that isn't correctly closed:
template : '<div</div>'
See this issue for more details:
https://github.com/angular/angular/issues/7849
Edit
The problem is that your h1 isn't correct (no begin element):
#Component({
selector: 'my-app',
template: '<h1>My first Angular 2 App</h1>' // <------
})
export class AppComponent {}
You should check the port number of nodeserver shows in your terminal,
In Angular2 it'll be running in 4200.
ie ** NG Live Development Server is running on http://localhost:4200. **
Then open localhost with specified port in browser.
I just use Phaser and saw some example code like below. In the Rox.Boot.prototype function, the .load, .physics, etc, are all in game(Phaser.Game). How does this inheritance happen?
Rox = {
score: 0,
music: null,
orientated: false
};
Rox.Boot = function (game) {
};
Rox.Boot.prototype = {
preload: function () {
this.load.image('preloaderBar', 'images/preload.png');
},
create: function () {
this.physics.startSystem(Phaser.Physics.ARCADE);
this.input.maxPointers = 1;
this.state.start('Preloader');
},
};
To use Phaser, you have to have a phaser.min.js or phaser.js file which you can get here. I use the phaser.min.js file instead of the phaser.js file because I don't need the extra features that the phaser.js file has (debugging); phaser.min.js will have all the same methods, classes, properties, etc as phaser.js.
They tell you to download the whole GitHub repo, but really you just need the Phaser JS file.
After you add the phaser.min.js file to your project, make sure it's the first script you call in the head of your HTML file; you should be able to use Phaser in the following JS files after that.
Here is what my index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FILL_IN_GAME_NAME_HERE</title>
<script src="phaser.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Main.css">
<script src="Boot.js" type="text/javascript"></script>
<script src="Preloader.js" type="text/javascript"></script>
<script src="Menu.js" type="text/javascript"></script>
<script src="Game.js" type="text/javascript"></script>
<script src="GameOver.js" type="text/javascript"></script>
<script src="HighScores.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game', false, false);
game.state.add('Boot', Game.Boot);
game.state.add('Preloader', Game.Preloader);
game.state.add('Menu', Game.Menu);
game.state.add('Game', Game.Game);
game.state.add('GameOver', Game.GameOver);
game.state.add('HighScores', Game.HighScores);
game.state.start('Boot');
</script>
</body>
</html>
I have a simple ExtJS4 MVC test application started with:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/Test/extjs-4.1.0/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="/Test/extjs-4.1.0/resources/css/CheckHeader.css">
<script type="text/javascript" src="/Test/extjs-4.1.0/ext-all-dev.js"></script>
<script type="text/javascript" src="/Test/ajax/api-debug.js?apiNs=MyNamespac"></script>
<script type="text/javascript" src="/Test/app.js"></script>
</head>
<body><div id="viewport"></div></body>
</html>
And here is the actual app.js code (i've copied the CheckColumn.js file to extjs-4.1.0\src):
Ext.Loader.setConfig({ enabled: true });
Ext.require([ 'Ext.ux.CheckColumn' ]);
Ext.direct.Manager.addProvider(MyNamespace.REMOTING_API);
Ext.application({
name : 'Auctions',
controllers : [ 'TestDates' ],
appFolder : '/Test/app',
launch : function() {
Ext.create('Ext.Panel', {
layout : 'fit',
items : [ {
xtype : 'testdates'
} ],
renderTo : 'viewport',
});
}
});
I had to include the Loader, otherwise the app complained it cannot load the controller. I also had to require the CheckColumn, otherwise the checkcolumn xtype was not recognized.
I am not getting the following error:
The following classes are not declared even if their files have been
loaded: 'Ext.ux.CheckColumn'. Please check the source code of their
corresponding files for possible typos: './ux/CheckColumn.js
You should create folder ux under extjs-4.1.0\src and copy CheckColumn.js file there. There is always a link in ExtJs between class name and location of the file. If you class name is Ext.ux.CheckColumn then path must be .\src\ux\CheckColumn.js