I am creating a starter template using angular 1.6, webpack, gulp and typescript. I am able to compile and build my application but app is not bootstrapping. The issue is weird as when I am debugging angular.module is defined and module can be created from console angular.module('testModule', []) but as resume debugger I get exception in core.module.ts at export const CoreModule = angular.module('app.core', []).name;.
I have further investigated this issue by disabling source code and I have found the problem. The above mentioned code compiles to exports.CoreModule = angular_1.default.module('app.core', []).name; where there is no property named default on angular_1.
For code refer https://github.com/muditsaurabh/awesome-ng-starter
Uncaught TypeError: Cannot read property 'module' of undefined
at Object.<anonymous> (app.bundle.js?cd4d443…:1)
at e (vendor.bundle.js?cd4d443…:1)
at Object.<anonymous> (app.bundle.js?cd4d443…:1)
at e (vendor.bundle.js?cd4d443…:1)
at Object.<anonymous> (app.bundle.js?cd4d443…:1)
at e (vendor.bundle.js?cd4d443…:1)
at window.webpackJsonp (vendor.bundle.js?cd4d443…:1)
at app.bundle.js?cd4d443…:1
vendor.bundle.js?cd4d443…:6Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' 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.6.1/$injector/nomod?p0=app
at http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:377
at http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:11230
at n (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:10668)
at http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:11004
at http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:20796
at r (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:809)
at h (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:20644)
at le (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:22631)
at a (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:8560)
at st (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:8870)
http://errors.angularjs.org/1.6.1/$injector/modulerr?p0=app&p1=Error%3A%20%…2F%2Flocalhost%3A8000%2Fvendor.bundle.js%3Fcd4d4432605c6f5be56a%3A6%3A8870)
at http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:377
at http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:11230
at n (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:10668)
at http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:11004
at http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:20796
at r (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:809)
at h (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:20644)
at le (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:22631)
at a (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:8560)
at st (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:8870)
http://errors.angularjs.org/1.6.1/$injector/modulerr?p0=app&p1=Error%3A%20%…2F%2Flocalhost%3A8000%2Fvendor.bundle.js%3Fcd4d4432605c6f5be56a%3A6%3A8870)
at http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:377
at http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:21073
at r (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:809)
at h (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:20644)
at le (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:22631)
at a (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:8560)
at st (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:8870)
at at (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:8109)
at http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:11:13916
at HTMLDocument.n (http://localhost:8000/vendor.bundle.js?cd4d4432605c6f5be56a:6:17809)
I have replaced import angular from 'angular' with import * as angular from 'angular' and now it is working fine.
Are you sure that AngularJS gets included before your script? The error means that the object angular hasn't been seen by Javascript yet and therefore module cannot be called on it.
You can also just add
"esModuleInterop": true,
to your tsconfig.json instead of using a star import everywhere.
Related
I am trying to use this md-steppers npm package in my angularjs app with webpack and having a hard time. This is also happening with angular-cache-buster npm package
So, I installed it via npm and used the following import statement
import mdSteppers from 'md-steppers';
and added it in the angularjs DI as below
angular.module('myapp', [ mdSteppers ]
I am getting the error shown below
Uncaught Error: [$injector:modulerr] Failed to instantiate module bolt due to:
Error: [$injector:modulerr] Failed to instantiate module {} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
http://errors.angularjs.org/1.5.5/ng/areq?p0=module&p1=not%20a%20function%2C%20got%20Object
at eval (webpack:///./node_modules/angular/angular.js?:68:12)
at assertArg (webpack:///./node_modules/angular/angular.js?:1880:11)
at assertArgFn (webpack:///./node_modules/angular/angular.js?:1890:3)
at eval (webpack:///./node_modules/angular/angular.js?:4573:11)
at forEach (webpack:///./node_modules/angular/angular.js?:322:20)
at loadModules (webpack:///./node_modules/angular/angular.js?:4548:5)....
I checked the module name for this npm package and it looks like below
angular.module('md-steppers', [
'material.core',
'material.components.icon']);
/**
* #ngdoc directive
* #name mdStep
* #module md-steppers
*
* #restrict E
Any help is greatly appreciated. thanks
Try the following:
import {name as mdStepper} from 'md-steppers';
angular.module('myapp', [mdSteppers]);
There is no any exported modules in this package.
So, you can use it only this way:
import angular from 'angular';
import mdStepper from 'md-steppers';
angular.module('myapp', ['md-steppers']);
I need to mask my input in my application. I was using ngMask in angularjs. But i found an issue in ngMask is that if we update the mid value the cursor move to end. I tried to resolve the issue but did not find anything. Even on github this issue has reported but still not resolved. Here is the link
ngMask Issue
Then i decided to use another mask library. I found ui-mask and trying to use in my application but i am getting error when i include in my project. My application is in angularjs and i am using requirejs as well to load the modules.
This is what i have done in main.js:
paths: {
...////
"angular-ui-mask": "../../lib/ui-mask/ui-mask.min",
},
'angular-ui-mask': {
deps: ['angular'],
exports: 'angular-ui-mask'
},
in app.js i have done:
var app = angular.module("app",
[
"ui.router",
"mobile-angular-ui",
"scrollable-table", //for alert triggering
"rzModule", //slider for SEMI diagram
"isteven-multi-select",
"ui.bootstrap",
"cgBusy", "dndLists", 'apm-kpi-widget',
'angular.filter',
"pascalprecht.translate",
"jQueryScrollbar",
"ui.checkbox",
"angular-ui-mask"
])
This is exact i was doing for ngMask. But in this case i am getting error
[$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?
at angular.js:38
at angular.js:4587
at q (angular.js:322)
at g (angular.js:4548)
at bb (angular.js:4470)
at c (angular.js:1746)
at Object.yc [as bootstrap] (angular.js:1767)
at HTMLDocument.<anonymous> (angularAMD.js:449)
at i (jquery-1.12.3.min.js?v=1531811705531:2)
at Object.add [as done] (jquery-1.12.3.min.js?v=1531811705531:2)
What's the issue?
I've been asked to do a project in Angular 1, and I've been having a nightmare of a time just trying to get the page to load the app code from bundle.js. I've currently got an error along the lines of
[$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {"_invokeQueue":
[],"_configBlocks":[],"_runBlocks":[],"name":"approveComponent"} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
but the only approveComponent I've got is essentially a blank placeholder -
import angular from 'angular';
const approve = angular.module('approveComponent', []);
export default approve;
What can I do to get this actually running?
I'm using Webpack 4 to bundle everything. (NO errors from webpack.)
I have seen this error earlier.You need to pass module name not module in the dependency
ngModule = angular.module('webpack', [
require('./webpack/photocrop/client')//this is a object
])
You can simply require the file and just inject by name Like this
var firstModule = require('./webpack/myapp/client')
ngModule = angular.module('webpack', [
'firstModule'//this is should work
])
firstModule(ngModule)
SAMPLE GITHUB REPO
I'm Trying to run my app in production profile, i'm using jhipster-generator for spring-boot app and angular. The app only run the footer and the background but the rest of the aplication nope, The error
Uncaught Error: [$injector:modulerr] Failed to instantiate module myAppdue to:
Error: [$injector:nomod] Module 'myApp' 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.5.8/$injector/nomod?p0=myApp
at http://localhost:8080/app/vendor-7004bf12ca.js:8:17716
at http://localhost:8080/app/vendor-7004bf12ca.js:8:27870
at n (http://localhost:8080/app/vendor-7004bf12ca.js:8:27343)
at http://localhost:8080/app/vendor-7004bf12ca.js:8:27655
at http://localhost:8080/app/vendor-7004bf12ca.js:9:4997
at r (http://localhost:8080/app/vendor-7004bf12ca.js:8:18164)
at f (http://localhost:8080/app/vendor-7004bf12ca.js:9:4845)
at rt (http://localhost:8080/app/vendor-7004bf12ca.js:9:6774)
at a (http://localhost:8080/app/vendor-7004bf12ca.js:8:25413)
at ie (http://localhost:8080/app/vendor-7004bf12ca.js:8:25723)
http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'myApp'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.5.8%2F%24injector%2Fnomod%3Fp0%3DdigitalBlogApp%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A8%3A17716%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A8%3A27870%0A%20%20%20%20at%20n%20(http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A8%3A27343)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A8%3A27655%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A9%3A4997%0A%20%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A8%3A18164)%0A%20%20%20%20at%20f%20(http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A9%3A4845)%0A%20%20%20%20at%20rt%20(http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A9%3A6774)%0A%20%20%20%20at%20a%20(http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A8%3A25413)%0A%20%20%20%20at%20ie%20(http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A8%3A25723)
at http://localhost:8080/app/vendor-7004bf12ca.js:8:17716
at http://localhost:8080/app/vendor-7004bf12ca.js:8:27870
at n (http://localhost:8080/app/vendor-7004bf12ca.js:8:27343)
at http://localhost:8080/app/vendor-7004bf12ca.js:8:27655
at http://localhost:8080/app/vendor-7004bf12ca.js:9:4997
at r (http://localhost:8080/app/vendor-7004bf12ca.js:8:18164)
at f (http://localhost:8080/app/vendor-7004bf12ca.js:9:4845)
at rt (http://localhost:8080/app/vendor-7004bf12ca.js:9:6774)
at a (http://localhost:8080/app/vendor-7004bf12ca.js:8:25413)
at ie (http://localhost:8080/app/vendor-7004bf12ca.js:8:25723)
http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'myApp'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.5.8%2F%24injector%2Fnomod%3Fp0%3DdigitalBlogApp%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A8%3A17716%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A8%3A27870%0A%20%20%20%20at%20n%20(http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A8%3A27343)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A8%3A27655%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A9%3A4997%0A%20%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A8%3A18164)%0A%20%20%20%20at%20f%20(http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A9%3A4845)%0A%20%20%20%20at%20rt%20(http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A9%3A6774)%0A%20%20%20%20at%20a%20(http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A8%3A25413)%0A%20%20%20%20at%20ie%20(http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fvendor-7004bf12ca.js%3A8%3A25723)
at http://localhost:8080/app/vendor-7004bf12ca.js:8:17716
at http://localhost:8080/app/vendor-7004bf12ca.js:9:5273
at r (http://localhost:8080/app/vendor-7004bf12ca.js:8:18164)
at f (http://localhost:8080/app/vendor-7004bf12ca.js:9:4845)
at rt (http://localhost:8080/app/vendor-7004bf12ca.js:9:6774)
at a (http://localhost:8080/app/vendor-7004bf12ca.js:8:25413)
at ie (http://localhost:8080/app/vendor-7004bf12ca.js:8:25723)
at re (http://localhost:8080/app/vendor-7004bf12ca.js:8:24962)
at HTMLDocument.<anonymous> (http://localhost:8080/app/vendor-7004bf12ca.js:13:25627)
at p (http://localhost:8080/app/vendor-7004bf12ca.js:2:8692)
what can it be ?
It is probably due to something you changed in index.html because JHipster uses gulp to inject scripts and css into it when building for production. Compare your current version with the one you archived in git at project generation time.
Uncaught Error: [$injector:nomod] Module 'firstApp.seconddir' 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
here is my code
http://goo.gl/LOcYI2
I am getting error while including the module in our project.
You should register new module before you use it.
Setting module: angular.module('your new module name', [])
Getting module: angular.module('module name')
So in your case, change the following line and error will not come.
angular.module('firstApp.seconddir').config(Routes);
to
angular.module('firstApp.seconddir', []).config(Routes);
Working demo: http://goo.gl/RvHzqr