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
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.
I just used the command npm install for a few modules for datetime picker and now I am getting a bunch of errors i've never seen before. I think it has something to do with npm install --save causing some of my json files to require some files in the datetimepicker repo. I couldn't get it to work so I deleted the node module but the errors are still there. Here are the errors:
GET http://alainwebdesign.ca/pl2/node_modules/angular-bootstrap datetimepicker/src/css/datetimepicker.css
GET http://alainwebdesign.ca/pl2/node_modules/angular-bootstrap-datetimepicker/node_modules/moment/moment.js
angular.js:63 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap.datetimepicker due to:
Error: [$injector:nomod] Module 'ui.bootstrap.datetimepicker' is not available!
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.
So, I generated a fresh angular-fullstack with TypeScript, MongoDB, Bootstrap, Bootstrap UI, Authentication Boilerplate, Twitter and Google OAuth, Grunt, Jasmine, HTML, CSS, and UI-Router for the settings.
After I ran npm install and bower install. There were some unmet dependencies, so I installed
TypeScript, locally
Mocha, locally
Tslint, locally
Also, I was getting an error during build that was resolved by installing
grunt-babel#5.0.0, locally.
Now, when I run "grunt serve" It all works just fine, except when I go to the Admin page at http://localhost:9000/admin. There is no list of users. Instead it says, "The delete user and user index api routes are restricted to users with the 'admin' role." All of the links on the navigation bar are dead, except for the app title.
When I check the console I get these two errors:
Uncaught Error: [$injector:nomod] Module
'perfectAlgorithmDrillsApp.auth' 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.
Uncaught Error: [$injector:nomod] Module
'perfectAlgorithmDrillsApp.admin' 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.
I triple-checked. They are not misspelled and they are correctly included in the list of module dependencies.
Further errors arise because the module isn't loaded. Obviously, it can't find the controllers, since those modules aren't loaded.
At this point, I have not added or changed any code.
I've tried a couple things to resolve the situation:
updating yo and angular-fullstack and then recreating the project from scratch.
wrapping those "missing" modules in IFFE's.
I updated node.js to the latest LTS version
More Details:
I am running everything on OSX El Capitan 10.11.2
I'm running node version 4.2.6, npm version 2.14.12, yeoman 1.6.0
in the yo.rc file it says the generator version is "3.3.0-beta.0"
I have mongod running.
I'm doing my work in WebStorm, but I haven't used anything that's built in. It's all been command line.
The TypeScript is being compiled correctly, as the .tmp directory looks good.
I made sure grunt-cli is installed.
Thanks so much for the help. Let me know if you need any more details.
I too had this exact problem. The long answer (plus some other answers to questions you might not be asking for yet or possibly ever) is here, but in short, replace var module = /\.module\.js$/; with var module = /[\w/]+.module.ts$/; inside Gruntfile.js.
If that doesn't work, try going here to see the whole thread on this issue.
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.