angular-cli: Bug: Runtime TypeError ("Cannot read property 'call' of undefined")

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

General information

We have an Angular 2 application running and I was asked to upgrade Angular (including it’s CLI) to the newest version (Note: I’m not really involved in the project, so I don’t know how the application is built or where the dependencies are used). I tried upgrading using the 1.0 update guide. Building the app with ng build works (no error messages), but when I navigate to the website, I get an error message in the console.

Versions

@angular/cli: 1.0.2
node: 7.9.0
os: win32 x64
@angular/animations: 4.1.1
@angular/common: 4.1.1
@angular/compiler: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/router: 4.1.1
@angular/cli: 1.0.2
@angular/compiler-cli: 4.1.1

Repro steps / packages

I don’t know what exactly causes this issue, therefore I don’t know how to reproduce it. packages.json

...
  "dependencies": {
    "@angular/animations": "^4.1.1",
    "@angular/common": "^4.1.1",
    "@angular/compiler": "^4.1.1",
    "@angular/core": "^4.1.1",
    "@angular/forms": "^4.1.1",
    "@angular/http": "^4.1.1",
    "@angular/platform-browser": "^4.1.1",
    "@angular/platform-browser-dynamic": "^4.1.1",
    "@angular/router": "^4.1.1",
    "@ngx-translate/core": "^6.0.1",
    "@webcomponents/custom-elements": "^1.0.0-rc.3",
    "clarity-angular": "^0.9.3",
    "clarity-icons": "^0.9.3",
    "clarity-ui": "^0.9.3",
    "core-js": "^2.4.1",
    "moment": "^2.18.1",
    "mutationobserver-shim": "^0.3.2",
    "ng2-file-upload": "^1.2.1",
    "ngx-bootstrap": "^1.6.6",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.3.1",
    "web-animations-js": "^2.2.5",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@angular/cli": "~1.0.2",
    "@angular/compiler-cli": "^4.1.1",
    "@types/jasmine": "2.5.47",
    "@types/node": "~7.0.18",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~3.0.4",
    "tslint": "~5.2.0",
    "typescript": "~2.2.0",
    "webpack": "~2.5.0"
  }
}

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  ...
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../../Content/less/clarity/datagrid.css",
        "../node_modules/clarity-icons/clarity-icons.min.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/core-js/client/shim.min.js",
        "../node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
        "../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
        "../node_modules/clarity-icons/clarity-icons.min.js",
        "../node_modules/web-animations-js/web-animations.min.js",
        "../node_modules/reflect-metadata/Reflect.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
...

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

The log given by the failure

I get this console error message at runtime (application is then stuck at “Loading…”): image Webpack is trying to get the module with the Id 0: image modules[0] is undefined though. Although when checking stats.json using the webpack analyzer, the module with the id 0 (./~/@angular/core/@angular/core.es5.js) exists.

Desired functionality

Proper bootstrapping of the application.

Mention any other details that might be useful

Someone had a similar problem and according to sokra this issue was fixed in 2.5.0. I got version 2.5.0 of webpack and put it manually in the node_modules folder of angular cli but the issue still persists. When I create a new application using ng new [name], it works fine. As soon as I put my src files and my dependencies in there I get this error.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 31
  • Comments: 93 (13 by maintainers)

Commits related to this issue

Most upvoted comments

Getting the same error. Locally it works fine, but in production some times it fails. any solution please

still having this problem with ng build --aot --prod --build-optimizer please angular cli team solve this issue I really need to run my project 😦

@codeStuffs ah thanks…I thought I was going crazy but apperently I’m not the only one were things are working fine and the next time not. 😃 Ayway… did you already put zone.js to version 0.8.12 instead of 0.8.13? Zone.js has a bug in 0.8.13. Angular cli has fixed zone.js to 0.8.12 but offcourse that is only for a new project you start.

Maybe this could help https://github.com/angular/angular-cli/pull/6971

Same, my lazy-loaded modules are throwing this error on rebuilds using ng serve --aot. If I terminate the process and build from scratch it’s not an issue.

i had this issue and it was because i was not including vendor.bundle.js

I see this issue in my project when using ng serve --aot on rebuilds.

@mariannafld First, change “zone.js”: “^0.8.12” to “zone.js”: “0.8.12” … without the ^ Then … remove your node_modules folder Then … npm install

Ionic is still as it is for long time: a lazy stitched broken bunch of crappy code without the need of doing anything professional. Everything they touch, even their professional services for which I have subscribed are loaded with bugs. They are always running AFTER new tech and features but for what reason? Bad design choices, bad community handling. Ionic is using their community to fix bugs and thats it, they pushing the nerve of their peer members to the limits to find out if someone will do the fixing for them. Rolling out Ionic4…already? Make one release stable for god sake. Ionic team please do less so we can both achieve more.

Using latest Angular CLI 5. I inexplicably started getting this error in IE during development, though Chrome was fine. I reverted all my changes since before the error began, error was still there. I restarted ‘ng serve’ but the error was still there. I closed the browser window and opened another and it went away. Weird.

Hey guys, i just fixed it for me 👍

My problem was, that i included the *.bundle.js files in the wrong order. I loaded them dynamically via PHP (because of the different hashes generated in the prod version) and included them in my blade.php file (alphabetically by default)

@foreach($jsBundles as $bundle) <script type="text/javascript" src="/_app/{{ $bundle }}"></script> @endforeach

I was wondering why ng serve worked but ng prod not so i included them in this order

inline.bundle.js polyfills.bundle.js scripts.bundle.js vendor.bundle.js main.bundle.js

And now it is working again. Maybe it will help one or another

Updating to the recent @angular/cli@1.6.6 version has resolved this issue for me.

Had the same error.   Solved.  I have my own "index.html" for integration purpose in rails. There I mixed up the sequence of javascript-file loading.

if you turn the line main.bundle.js and the line vendor.bundle.js this error happens.  In my case it was a matter of loading sequence.

`
<base href="/">
<app-root>Lade Vordialog...</app-root>

.......


<![if IE]>
<script type="text/javascript" src="ang/inline.bundle.js"></script>
<script type="text/javascript" src="ang/styles.bundle.js"></script>
<script type="text/javascript" src="ang/vendor.bundle.js"></script>
<script type="text/javascript" src="ang/main.bundle.js"></script>
<![endif]>
`

This definitely isn’t a fix by any means but clearing the cache in chrome fixes it temporarily for our team. The problem still comes up every now and again but it at least fixes it for a while so we can keep working.

I obviously understand this is something people are experiencing, but I cannot reproduce myself on a new project. Reports that this is also happening in your project are useful to determine impact, but not so much to figure out how to fix it.

So if you’re experiencing this bug, and want to help getting it fixed, the absolute best way is to provide a simple reproduction that the CLI team can follow. Make a new project, add the bare minimum of code, upload to github, and post here with instructions on how to use the repro.

Ideally it should be as simple as git clone, npm install, ng serve, open browser, see console. The harder it is to reproduce, the less likely it will be fixed soon.

Once we have a repro, we can investigate and develop a solution against it.

Hello all, The same problem: works OK locally and Fails in production (ng build --env=prod --output-hashing none). Two days fighting with this issue. All npm packages are up to date. Please, provide with any update.

I was running into this issue when doing a dotnet run build without doing a ng production build first.

This fixed it for me ng build --env=prod --output-hashing none

This issue also still persists with webpack v3.8.1, node v8.9.1 and angular v5.0.3. Downgrading zone.js to v0.8.12 does not work.

I noticed, refreshing the remote machine’s browser repeatedly, gets it working for me. I mean not always tho, but when it doesn’t I do delete my node_modules folder and npm install, this temporarily fixes it, but when ever I install or import a new package it gets bugged up again. And I have to repeat my lucky process.

@Leffe108 If Ionic-cli is like angular-cli you musn’t use serve for production, that is only for development cause it start a new webpack-server (node) and dont need that only for build the production app, besides in the first instruction you are not setting the env vars, maybe that is the error.

In my case the error is just the oposite, ng server build a pack that works in local, in production pipeline I use ng build and it dont works, both with same env vars.

Edit: I manually install webpack@latest and webpack-dev-server@latest and it works but I guess it should be arranged by other way