I must be missing something very basic but I can't get Restangular to load. My steps ...
Scaffold a new project with Yeoman
Insert includes for Lodash and Restangular
Inject restangular into my module.
grunt test
This is the result ...
Error: [$injector:modulerr] Failed to instantiate module fooApp due to:
Error: [$injector:modulerr] Failed to instantiate module restangular due to:
Error: [$injector:nomod] Module 'restangular' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Here are my includes ...
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/lodash/dist/lodash.js">
<script src="bower_components/restangular/dist/restangular.js">
Yes, they are in my bower_components directory.
My module definition is ...
angular.module('fooApp', [
'ngResource',
'restangular'
]);
Any help would be appreciated
Thanks to Marc Kline's help I finally got things working. Here's what I had to do:
yo angular foo
bower install lodash --save
bower install restangular --save
grunt bowerInstall
npm install karma-jasmine --save-dev
npm install karma-chrome-launcher --save-dev
npm install
I had a similar issue to this, and the problem was due to the fact that I hasn't added the Lodash and Rectangular JS assets to my Karma test config.
Adding lodash.compat.min.js and restangular.min.js to the files array in karma.conf.js made my tests run correctly.
Related
I want to build a web application and I have started building this by using the angular fullstack generator. This generator uses webpack and this is the first time I am using webpack.
I have been trying to add the ngMaterial dependency by installing it with:
npm install angular-material --save
I have added the dependency in the config.entry.vendor from the webpack.make.js file but when I tried to import the ngMaterial i received the following error:
ERROR in ./client/app/app.js
Module not found: Error: Cannot resolve module 'ngMaterial' in path\client\app
# ./client/app/app.js 21:18-39
How can I inject a dependency with webpack?
I assume you pointed incorrect dependency name in webpack configuration: ngMaterial instead of angular-material.
ngMaterial is angularjs module name, you point it as a dependency in your angular app module, like this:
angular.module('app', ['ngMaterial'])
But in webpack dependencies you have to point node.js module name, which is angular-material (it is located in node_modules folder after you install it via npm install command)
EDIT:
If needed in your app.js you also have to import that module via import 'angular-material' or require('angular-material'). But if you include this dependency in separate vendor.js file (via webpack), than you shouldn't ever include this module in your app.js, cause it will upload to the page in vendor.js. You'll include it 2 times in your project if you do so.
Created a project in web directory. Hello world example works.
Installed node and grunt.
Ran:
npm install angular-ui-bootstrap --save-dev
angular-ui-bootstrap is now in node_modules
How do I start developing with any npm installed local package?
Like this?
<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
My point of installing is because I am following tutorials and they have this:
var app = angular.module('store', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
Which I believe needs ui-bootstrap-tpls.js
Thanks!
Yes, you need to add
<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
in index.html, only then you can inject 'ui.bootstrap' into your angular module else you'll get injector error.
I've made an AngularJS web application using Yeoman as project starter.
Launching the following command:
grunt serve
everything is working fine.
If I try to test the dist version for production, using the following command:
grunt serve:dist
I get erorrs like this in browser console:
vendor.f13d432c.js:1 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module uuid4 due to:
Error: [$injector:nomod] Module 'uuid4' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
What's wrong?
EDIT
Same happens with:
grunt build
and then deploy the dist folder in a webserver
Have you tried running:
npm install
Apparently, 'uuid4' is missing. This is a npm package so chances are you still need to include this, running npm install.
I've been trying to user browserify with Foundation for apps, which was recently added on npm (version 1.02). Since the npm package from foundation-apps is not commonjs compatible I've decided to use "browserify-shim"
The difference between the bower component and npm package of foundation for apps, is that the former comes with all the dependencies included (angular, ui.router, angular-animate etc), while the npm version comes only with the absolutely necessary stuff (foundation core, components and services).
I installed angular and angular-animate from npm, and shimmed them (npm versions of angular/angular-animate are also not in the commonjs format). As for ui.router, the npm package supports commonJS, so no need for shiming.
This is my package.json
and this is my main.js (app entry point)
Browserify successfully creates a bundle.js file, that includes everything (foundation.core, components, services as well as angular, angular-ui-router and angular-animate)
But my app instantiation fails with this message:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module application due to:
Error: [$injector:modulerr] Failed to instantiate module foundation.dynamicRouting due to:
Error: [$injector:nomod] Module 'foundation.dynamicRouting' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.8/$injector/nomod?p0=foundation.dynamicRouting
Any ideas what might be the case? I'm suspecting there's a dependency somewhere that didn't catch my attention, or perhaps something I messed up in package.json
When I installed angularjs with yeoman I got asked to install some additional packages like:
angular-route
angular-sanitize
etc...
Now I remove angular-sanitize with:
bower uninstall --save angular-sanitize
When I start my index.hmtl page with
grunt server
Then my browser window is white/empty and the browser console says:
Uncaught Error: [$injector:modulerr] Failed to instantiate module appApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngSanitize due to:
Error: [$injector:nomod] Module 'ngSanitize' is not available! You either misspelled the mo...<omitted>...1)
1) Now I ask myself WHY can I optionally install an angular plugin which is needed by the core angular.js.
2) How can I fix the mess ? I do not need ngSanitize.
When you write angular apps you have the ability to include modules.
angular.module('myApp', [ 'ui.router', 'ngAnimate','ngSanitize']);
when you do not have a dependency loaded.. ie: you uninstall it, you ALSO have to remove it from your application modules or it will throw the error that you have listed. You must remove the 'ngSanitize' as well as the .js file for it to be unloaded.
angular.module('myApp', [ 'ui.router', 'ngAnimate']);
see how now ngSanitize is no longer listed. do a find in your project and locate it and remove it from the modules list.