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.
Related
We are migrating CSS-loader from v0.28.11 to v3.1.0
We have 2 projects:
Project A- No component dependency on any other project - (containing some components)
Project B - We are importing Project A as node modules
We are able to run and build project A successfully.
But when we try to run Project B we getting a dependancy error for css files from Project A.
ERROR in ./src/help/css/about.qcss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './Project/A/src/typography/css/qx-typography.css' in 'D:\Projects\B\src\help\css'
at factory.create (D:\Projects\B\node_modules\webpack\lib\Compilation.js:823:10)
at factory (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:397:22)
at resolver (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:130:21)
at asyncLib.parallel (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:224:22)
at D:\Projects\B\node_modules\neo-async\async.js:2830:7
at D:\Projects\B\node_modules\neo-async\async.js:6877:13
at normalResolver.resolve (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:214:25)
at doResolve (D:\Projects\B\node_modules\enhanced-resolve\lib\Resolver.js:184:12)
at hook.callAsync (D:\Projects\rx\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
at _fn0 (eval at create (D:\Projects\B\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
Same works fine with if we do css-loader of Project A to v3.1.0 and Project B to v1.0.0
But we get a compile-time error if we change both project css-loader version to 3.1.0
We should be able to run and create a build using CSS-loader with version 3.1.0
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cj s.js):
Error: Missing binding /home/user/frontloja/node_modul es/node-sass/vendor/ linux-x64-64/binding.node
Node Sass could not find a binding for your current environment : Linux 64-bit with Node.js 10.x
Found bindings for the following environments:
- Linux 64-bit with Node.js 12.x
In my case, it happened after I updated ubuntu 18 to 20, so I did it like this
remove or rename node_modules
then reinstall use npm or yarn install
This issue happens because of webpack resolve.alias not works
To solve this issue we can use the relative path.
In my case
Currently, I am in Projects\B\src\help\css
and requiring file from node_Modules
/Project/A/src/typography/css/qx-typography.css
so my path be like (**Relative Path**)
../../../../node_modules/Project/A/src/typography/css/qx-typography.css";
Error: ./src/styles.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Failed to find 'bootstrap/dist/css/bootstrap.min.css'
Solution:
Run the following command for installing additional packages
npm install bootstrap jquery popper.js
I had this issue in my Angular project. It looks like a bootstrap issue. I just downgraded bootstrap from 5.1.3 to 4.6.0. That's all
I have used ngMaterialDatePicker which works fine in dev mode but when I tried to run using gulp serve:dist I am getting the below mentioned error can anyone tell me why it has a strange behaviour like this:
Error:
Module 'ngMaterialDatePicker' 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.
Probably the problem is in uglyfing js code, do you use ng-annotate or babel plugin for build command?
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 just installed Generator-ionic
in the folder where i genrated the app im trying to run grunt server
i get this error Error: Cannot find module 'win-spawn'
Not sure why the dependency is not being met, but it happened here too.
Solution:
npm install win-spawn
Edit:
Generator-ionic team is aware of the issue: https://github.com/diegonetto/generator-ionic/issues/162
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