I'm learning AngularJS and trying do like on video but I found problem. I've got this 2 errors:
Uncaught Error: No module: ui.directives
Uncaught Error: No module: ui.directives.sortable
In my app.js I have like they said on github:
angular.module('507917App', ['ui.directives.sortable'])
And also I've added this line to code:
<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>
Looking into path and there is definition for ui.directives:
angular.module('ui.directives').directive('uiSortable', [...
Question
Is there anything what I missed or do wrong? Why I've got this errors?
Try changing it to angular.module('507917App', ['ui.sortable']). It worked for me. If you look in the actual sortable.js file, that's the name of the module. I believe the developer just forgot to update that on the documentations.
Ok I found solution. Before including this script (or other component from angular-ui):
<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>
you need also include this:
<script type="text/javascript" src="components/angular-ui/build/angular-ui.js"></script>
also first line of app should looks like here:
angular.module('507917App', ['ui'])
Related
I am trying to use a method from a javascript module and i dont understand why i get this error :
index.html:5
Uncaught ReferenceError: starts is not defined
at window.onload (index.html:5:11)
I have 2 js files and a html one and all are in the same folder.
connect.js
function start(){
console.log("ok");
}
main.js
import{start} from './connect.js';
export{starts};
function starts(){
start();
console.log("started script");
}
Index.html
<html>
<body>
<script type="text/javascript" >
window.onload=function(ev){
starts();
};
</script>
</body>
<script type="module" src="./connect.js"></script>
<script type="module" src="./main.js"></script>
</html>
If you are trying to use modules from the local filesystem (by directly opening index.html), this is not allowed due to CORS restrictions. See this for more details: javascript modules and CORS
If there are no other project requirements regarding the use of modules, you may use the scripts without type="module" and remove import/export statements from main.js. Otherwise, you would need a server.
You have made a spelling mistake in second line of your main.js
Use export{start} instead of export{starts}; And also change that in HTML file.
I would like try gzip-js. and I make a html file to use function of gzip-js
I went https://www.npmjs.com/package/gzip-js, made "npm i gzip-js", as they suggested, the I got some files anf folders,then I wrote an html file(which is in the folder "\node_modules\gzip-js\lib")
<html>
<script src="gzip.js">
var gzip = require('gzip-js');
var out = gzip.zip('Hello world');
console.log(out);
</script>
<body>
</body>
</html>
I hope it will work as the website show, but I was told "Uncaught ReferenceError: require is not defined at gzip.js:4 at gzip.js:280"
in the console of my browser.
I have following app on stackblitz https://stackblitz.com/edit/ang-rafzby
that works fine in their web environment, but when I download the project and try to run it on my machine, it gets stuck on 'loading'.
I've installed all required npm modules, even the peer ones and just can't find the solution for this.
Edit(chrome console output):
ERROR Error: The selector "app-root" did not match any elements
at DefaultDomRenderer2.push../node_modules/#angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.selectRootElement (platform-browser.js:1068)
at BaseAnimationRenderer.push../node_modules/#angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.selectRootElement (animations.js:228)
at DebugRenderer2.push../node_modules/#angular/core/fesm5/core.js.DebugRenderer2.selectRootElement (core.js:11449)
at createElement (core.js:8129)
at createViewNodes (core.js:10360)
at createRootView (core.js:10313)
at callWithDebugContext (core.js:11344)
at Object.debugCreateRootView [as createRootView] (core.js:10831)
at ComponentFactory_.push../node_modules/#angular/core/fesm5/core.js.ComponentFactory_.create (core.js:8659)
at ComponentFactoryBoundToModule.push../node_modules/#angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (core.js:3311)
Found the solution!
in the index.html the app-root selector has to be inside the html 'body' tag like this:
<body>
<app-root></app-root>
</body>
and stackblizt doesn't need that or just does it by itself.
I have a webpack-dev-server running that compiles and serves some Babel/React code. I have gotten as far as to have it serve the compiled client.js over localhost:3001.
But when I try to include the script in my HTML, I get the following error in Chrome's developer console:
routerWarning.js:19 Uncaught SyntaxError: Unexpected token :
That line belongs to react-router and contains the following code:
process.env.NODE_ENV !== 'production' ? _warning2['default'].apply(undefined, [falseToWarn, message].concat(args)) : undefined;
First, I don't see how that line of code would cause a syntax error. And second, I don't understand how it got in, because this looks like a piece of compiled (babelified) code to me. And finally, I don't know how to fix it! :(
Any help would be greatly appreciated.
I was using webpack's DefinePlugin to set process.env.BABEL_ENV like this:
new DefinePlugin({
'process.env': {
BABEL_ENV: JSON.stringify('client')
}
});
This resulted in webpack replacing all instances of process.env in the code with {"BABEL_ENV":"client"}. The SyntaxError was caused in this part, not in the ternary expression.
I fixed it by setting process.env.BABEL_ENV like this:
new DefinePlugin({
'process.env.BABEL_ENV': JSON.stringify('client')
});
I am trying to add html to a div as follows:
$scope.thehtml = $sce.trustAsHtml("<b>hello</b>")
<div ng-bind-html="thehtml">
</div>
I see following error in console:
TypeError: undefined is not a function
at htmlParser (js/angular/angular-sanitize.js:205:17)
at $sanitize (js/angular/angular-sanitize.js:119:5)
at Object.ngBindHtmlWatchAction [as fn] (js/angular/angular-sanitize.js:420:15)
at h.$get.h.$digest (js/angular/angular.min-125.js:98:396)
The angular-sanitize.js:205:17 is this:
if ( html.indexOf("<!--") === 0 ) {
index = html.indexOf("-->");
Apparently html is not being treated as a String, therfore the error on indexOf ?
I have included the angular-sanitize.js, and added module 'ngSanitize' to the app.
Please see this plunk.
From what I can see your implementation looks fine! My plunk is working and I am not getting an exception with the same code.
I have not had to add ngSanitize as a dependancy of the module, I have just injected $sce into my controller.
The versions of the libraries I have used are as follows:
https://code.angularjs.org/1.2.28/angular.js
https://code.angularjs.org/1.2.0-rc.3/angular-sanitize.js
Please try replacing your script references with these versions to see if it the libs that are at fault.
Let me know how you get on! Good luck :)
Include angular first, then angular-sanitize:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/x.y.z/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/x.y.z/angular-sanitize.js"></script>