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

[SerhanP]

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..."):

Webpack is trying to get the module with the Id 0:

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.

[filipesilva]

I haven't seen any similar issues yet, so without a repro there isn't much we can do to investigate. Can you try to make a simple one that we can look at? It might be something simple but there's just no way of knowing without a repro.

[sonnb]

This issue is related to https://github.com/webpack/webpack/issues/959 and https://github.com/AngularClass/angular-starter/issues/456. But since webpack config is embedded in cli, we cannot apply the same fix.

[nadhir-falta]

Getting the same error.
Locally it works fine, but fails in my dev server

[asqwrd]

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

[nag0538]

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

[karlos1337]

Same here, locally works but not in production

[Leffe108]

TL;DR: the solution provided here was a false hope, not solving the issue
I had the same issue when I uploaded the www folder built by ionic serve to my website. I found that if I instead build using npm run ionic:build --prod, this problem appears to have been solved.

Edit: Here is the post where I found the solution

Edit2: It seems that the problem has not resolved only less frequent in my use case.

[karlos1337]

@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

[mariannafld]

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.

[Leffe108]

Sorry for getting a bit of topic including ionic commands above. But to get to a solution the team member above asked for a simple repo or steps to reproduce. So to get forward we need to find out what a minimal repo that reproduces this looks like and provide it to the team so the problem can get solved.

[richardsengers]

Same error here ... the error doesn't help much to debug....quite annoying
Manually installing webpack@latest and webpack-dev-server@latest didn't do the trick for me. I'm getting all kind of eror messages from webpack while building

[mariannafld]

Dear Leif Linse,

To localize the problem, I do the following

1. Build the project from scratch “kendo-ui-first-look” followed by http://www.telerik.com/blogs/using-kendo-ui-with-angular-2.

2. Update to the latest packages: npm, webpack, @angular/cli, webpack-dev-server.

3. Running: ng build --env=prod --output-hashing none

4. Transfer dist to the machine (with Lighttpd server)

5. Launch in Chrome

The same problem occurs on this virgin project.
Thank you in advance, Marianna

[richardsengers]

For me the error is gone with 1.3.0-beta.1

[Leffe108]

mariannafld: Thanks for providing a way to reproduce it. I'm sorry if I sounded like I could fix it, but I just re-read the status of the thread and saw that a lot of people had the problem, but none had answered the question from Angular member to provide repo or steps to reproduce.

But if it is solved in 1.3.0-beta.1 it may be that the team found a way to reproduce it or fix it anyway.

[mariannafld]

Update @angular/cli to version 1.3.0-beta.1 did not solved the problem for me. Angular team, please, try to reproduce this in clean project http://www.telerik.com/blogs/using-kendo-ui-with-angular-2 (without installing kendo-ui ).
Thank you in advance

[richardsengers]

Hmmm... What version of typescript are you using?
Also updating typescript to the latest version fixes it for me, it wasn't just only the new beta version of angular-cli. I was on Typescript 2.3.4 and I'm now on 2.4.1

[thatDeryk]

Seems like there's no fix to this issue yet. The funny thing is, 1 min it was working fine and the next min boom things fell apart.

[mariannafld]

Yes... Still no solution. Typescript update didn't lead to desired results:(.

[richardsengers]

@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

[thatDeryk]

@richardsengers you are my hero. lol. I downgraded zone.js to 0.8.12 and voilà! it worked.

[mariannafld]

Oh, @codeStuffs, I want to be happy like you, and promote @richardsengers to be a hero for all! But, my current zone.js is 0.8.12. And the deployment still doesn't work. Could you, please, provide me with a list of your main npm pacakges?

[karlos1337]

Currently my project is running with these dependencies and without incidents since last webpack manual installation:

"dependencies": {
    "@angular/animations": "^4.3.0",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/core": "^4.3.0",
    "@angular/flex-layout": "^2.0.0-rc.1",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",
    "@angular/router": "^4.3.0",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^2.0.4",
    "@ngrx/router-store": "^1.2.6",
    "@ngrx/store": "^2.2.3",
    "@ngrx/store-devtools": "^3.2.4",
    "@ngx-translate/core": "^7.0.0",
    "@ngx-translate/http-loader": "^0.1.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "howler": "^2.0.4",
    "redux": "^3.7.2",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "^1.2.1",
    "@angular/compiler-cli": "^4.3.0",
    "@types/hammerjs": "^2.0.34",
    "@types/howler": "^2.0.2",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.83",
    "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-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "pug": "^2.0.0-rc.1",
    "pug-loader": "^2.3.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }

[richardsengers]

@mariannafld I've removed all the ^ from the packages so these are the versions which are installed

"dependencies": {
    "@agm/core": "1.0.0-beta.0",
    "@angular-mdl/core": "4.0.8",
    "@angular-mdl/popover": "0.6.3",
    "@angular-mdl/select": "0.10.4",
    "@angular/animations": "4.2.6",
    "@angular/cdk": "2.0.0-beta.8",
    "@angular/common": "4.2.6",
    "@angular/compiler": "4.2.6",
    "@angular/core": "4.2.6",
    "@angular/forms": "4.2.6",
    "@angular/http": "4.2.6",
    "@angular/material": "2.0.0-beta.8",
    "@angular/platform-browser": "4.2.6",
    "@angular/platform-browser-dynamic": "4.2.6",
    "@angular/router": "4.2.6",
    "@covalent/core": "1.0.0-beta.6",
    "@types/auth0-js": "8.6.2",
    "angular2-jwt": "0.1.28",
    "auth0-js": "7.6.1",
    "bootstrap": "4.0.0-alpha.6",
    "color-namer": "1.3.0",
    "core-js": "2.4.1",
    "css-element-queries": "0.4.0",
    "deep-extend": "0.5.0",
    "font-awesome": "4.7.0",
    "highcharts": "5.0.12",
    "medium-editor": "5.23.1",
    "moment": "2.18.1",
    "moment-timezone": "0.5.13",
    "mydatepicker": "2.0.24",
    "ng2-file-upload": "1.2.1",
    "ng2-slim-loading-bar": "4.0.0",
    "ng2-validation": "3.9.1",
    "ngx-color-picker": "4.1.0",
    "papaparse": "4.3.3",
    "rxjs": "5.1.0",
    "tether-shepherd": "1.8.1",
    "zone.js": "0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.2.1",
    "@angular/compiler-cli": "4.2.6",
    "@types/highcharts": "4.2.57",
    "@types/jasmine": "2.5.53",
    "@types/node": "6.0.60",
    "codelyzer": "3.0.1",
    "jasmine-core": "2.6.4",
    "jasmine-spec-reporter": "3.3.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "0.2.3",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.1.2",
    "ts-node": "3.0.4",
    "tslint": "5.3.2",
    "typescript": "2.3.3"
  }

Hope this helps you a bit

[thatDeryk]

@mariannafld here is my list of npm packages

  "dependencies": {
    "@angular/animations": "^4.3.0",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/core": "^4.3.0",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",
    "@angular/router": "^4.3.0",
    "angular2-moment": "^1.5.0",
    "angularfire2": "^4.0.0-rc.1",
    "core-js": "^2.4.1",
    "firebase": "^4.1.3",
    "hammerjs": "^2.0.8",
    "material-design-lite": "^1.3.0",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "node-sass": "^4.5.3",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "^1.2.1",
    "@angular/compiler-cli": "^4.3.0",
    "@angular/language-service": "^4.3.0",
    "@types/jasmine": "2.5.45",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "^2.4.1"
  }

[mariannafld]

Good day to all.
Still, the problem exists:(.
These are dependencies from empty test project:

"dependencies": {
"@angular/cli": "^1.3.0-beta.1",
"@angular/common": "^4.3.0",
"@angular/compiler": "^4.3.0",
"@angular/core": "^4.3.0",
"@angular/forms": "^4.3.0",
"@angular/http": "^4.3.0",
"@angular/platform-browser": "^4.3.0",
"@angular/platform-browser-dynamic": "^4.3.0",
"@angular/router": "^3.3.1",
"core-js": "^2.4.1",
"npm": "^5.2.0",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.5.1",
"zone.js": "^0.8.12"
},
"devDependencies": {
"@angular/compiler-cli": "^4.3.0",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "^2.4.1"
}

One more thread I found that talk about the same problem in different context:
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/456
It is so easy to reproduce when creating new empty project http://www.telerik.com/blogs/using-kendo-ui-with-angular-2 (without installing kendo-ui ).

[richardsengers]

@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

[mariannafld]

Nothing....
I close to develop manic-depressive syndrome:)
On each new item in the tread - I'm in 'Hi'
On the suggest implementation - I'm in 'Down'

[coryrylan]

Just started running into this issue after upgrading from 1.1.1 of the cli to 1.2

[filipesilva]

Heya, can someone upload to github a project where I can run npm install && ng serve and see this behaviour?

[coryrylan]

I don't have an easy way to upload a project but could be related to these

https://github.com/angular/angular-cli/issues/7021
https://github.com/webpack/webpack/issues/959

[thatDeryk]

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.

[filipesilva]

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.

[mariannafld]

Dear friends,
Sorry for disappearing for a month (was switched to another project).
Filipesilva, per your request, I uploaded my project, created today from scratch: https://github.com/mariannafld/TestAngularCLI-Deployment

1. Run: ng build --env=prod --output-hashing none
2. move created dist folder to real device
3. Exception:
   Uncaught SyntaxError: Unexpected token <
   bootstrap e48bca6c55378bbd138f:54 Uncaught TypeError: Cannot read property 'call' of undefined
   at __webpack_require__ (bootstrap e48bca6c55378bbd138f:54)
   at Object.../../../../../src/main.ts (environment.ts:3)
   at __webpack_require__ (bootstrap e48bca6c55378bbd138f:54)
   at Object.0 (main.ts:11)
   at __webpack_require__ (bootstrap e48bca6c55378bbd138f:54)
   at webpackJsonpCallback (bootstrap e48bca6c55378bbd138f:25)
   at main.bundle.js:1

Thank you in advance

[rokerkony]

I experience same problem in our application as well but only in the case I turn on In Chrome the Throttling to Slow 3G. @filipesilva maybe that can help to find it for you?

p.s.: I can experience it on simple npm start --aot=false ... prod build is with --aot=true -prod and it is happening as well

on @angular/[email protected] and also on new 1.3.0

[douglasg14b]

Also having the same issue :|

No idea what's actually causing it, so I can't re-create it......

[douglasg14b]

@filipesilva

The error is triggered by registering a callback on $transitions without defining the first parameter.

Example That Causes Error:

$transitions.onStart(() => {/* do stuff */});

Example That Does Not Cause Error

$transitions.onStart("*", () => {/* do stuff */});

[DanialV]

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 :(

[filipesilva]

@Brocco can you investigate the repros provided?

[MazzMazz]

Any news?
ng serve working fine but ng build and ng build --prod --env=prod is giving me that error.

Keeps me from publishing my application.

"dependencies": {
"@agm/core": "1.0.0-beta.0",
"@amcharts/amcharts3-angular": "1.4.0",
"@angular/animations": "^4.4.0-RC.0",
"@angular/cdk": "^2.0.0-beta.10",
"@angular/compiler": "4.2.6",
"@angular/core": "4.2.6",
"@angular/forms": "4.2.6",
"@angular/http": "4.2.6",
"@angular/material": "^2.0.0-beta.10",
"@angular/platform-browser": "^4.4.0-RC.0",
"@angular/platform-browser-dynamic": "4.2.6",
"@angular/router": "4.2.6",
"@ngx-translate/core": "^7.2.2",
"@ngx-translate/http-loader": "^1.0.2",
"@swimlane/ngx-charts": "^6.0.2",
"@swimlane/ngx-datatable": "9.3.0",
"@types/leaflet": "1.0.63",
"amcharts3": "3.21.2",
"angular-calendar": "0.17.4",
"axios": "^0.16.2",
"bootstrap-sass": "^3.3.7",
"chart.js": "2.6.0",
"core-js": "2.4.1",
"cross-env": "^5.0.1",
"d3": "^4.9.1",
"hammerjs": "2.0.8",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"leaflet": "1.0.3",
"lodash": "^4.17.4",
"ng-build": "^0.1.12",
"ng-factory": "^1.1.0",
"ng2-charts": "1.6.0",
"ng2-validation": "4.2.0",
"rxjs": "5.4.2",
"squeezebox": "1.1.12",
"vue": "^2.1.10",
"zone.js": "0.8.12"
},
"devDependencies": {
"@angular/cli": "1.4.1",
"@angular/common": "^4.3.6",
"@angular/compiler-cli": "4.2.6",
"@angular/language-service": "4.2.6",
"@types/jasmine": "2.5.52",
"@types/jasminewd2": "^2.0.3",
"@types/node": "8.0.1",
"axios": "^0.16.2",
"bootstrap-sass": "^3.3.7",
"codelyzer": "3.1.1",
"cross-env": "^5.0.1",
"jasmine-core": "2.6.4",
"jasmine-spec-reporter": "4.1.1",
"jquery": "^3.1.1",
"karma": "1.7.0",
"karma-chrome-launcher": "2.1.1",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.3.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"protractor": "5.1.2",
"ts-node": "3.1.0",
"tslint": "5.4.3",
"typescript": "2.3.4",
"uglify-js": "^2.8.29",
"undertaker-app-tasks": "^0.5.2",
"vue": "^2.1.10"
}

[MazzMazz]

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)

@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

[mariannafld]

MazzMazz, thank you for your input.
Unfortunately, it didn't worked for me.
Angular CLI team, please, try to provide us with a solution. It is become so crucial for my project!
There is another thread here (Uncaught TypeError: Cannot read property ‘call’ of undefined in Chrome #1847) with the same problem.
Maybe this link will give some hint? http://gonodejs.com/2017/01/24/node-js-angularjs2-cannot-read-property-call-of-undefined-when-bootstrapping/
Thank you in advance

[marcotoldo]

@MazzMazz

thanks for pointing me to the right direction!

For a stupid reason (wanted to list in the alphabetical order all bundles imported) I put "main" before "vendor" and the 'call on undefined' error appeared.

After restoring the strict order as in the index.html generated by the CLI everything is fine again :-)

[RicardoVaranda]

I'm still getting a similar error running

• CLI 1.5.0-beta.2
• TS 2.5.3
• rxjs 5.4.2

Running
ng build --prod --build-optimizer

Builds successfully but then at run time when lazy loading a module it shoots out the following error:

core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (index.js:35)
    at Object../node_modules/rxjs/Subscriber.js (index.js:34027)
    at __webpack_require__ (index.js:35)
    at Object../node_modules/rxjs/util/toSubscriber.js (index.js:35882)
    at __webpack_require__ (index.js:35)
    at Object../node_modules/rxjs/Observable.js (index.js:33493)
    at __webpack_require__ (index.js:35)
    at Object../node_modules/rxjs/add/operator/map.js (index.js:34524)
    at __webpack_require__ (index.js:35)
    at Object../src/index.ts (index.js:36696)
    at __webpack_require__ (index.js:35)
    at Object../node_modules/rxjs/Subscriber.js (index.js:34027)
    at __webpack_require__ (index.js:35)
    at Object../node_modules/rxjs/util/toSubscriber.js (index.js:35882)
    at __webpack_require__ (index.js:35)
    at Object../node_modules/rxjs/Observable.js (index.js:33493)
    at __webpack_require__ (index.js:35)
    at Object../node_modules/rxjs/add/operator/map.js (index.js:34524)
    at __webpack_require__ (index.js:35)
    at Object../src/index.ts (index.js:36696)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at zone.js:873
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at <anonymous>

Has there been any development in this issue?

[filipesilva]

Hi all, I'm trying to figure out what's happening here but I'm getting a lot of conflicting reports/repros. Some people mention build optimizer but some also don't, some say it only happens on deploy others say it's also serve.

The root cause of this problem seems to be related to script loads.

So for @mariannafld, @rokerkony and @MazzMazz's report it sounds like it's related to how you deploy: you might be serving some scripts out of order and then some modules are not available.

@DanialV and @RicardoVaranda mention --build-optimizer specifically, and that might mean it's malfunctioning and removing some modules that are needed.

But I must reiterate: I need a repro to investigate. If you are experiencing this please setup a simple repro from a new project, make the least changes possible for me to see it, upload it to github, and let me know what steps to follow.

[filipesilva]

@RicardoVaranda has provided a reproduction in https://github.com/RicardoVaranda/BuildOptimizerBug. Will investigate.

[dmsam]

After setting script.async = false; I'm still getting the below error while deploying the application.
Uncaught TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (bootstrap b67e0d5dd7bab816096c:54)
at Object.../../../../../src/main.ts (ui.component.ts:10)
at __webpack_require__ (bootstrap b67e0d5dd7bab816096c:54)
at Object.0 (.*$:105)
at __webpack_require__ (bootstrap b67e0d5dd7bab816096c:54)
at webpackJsonpCallback (bootstrap b67e0d5dd7bab816096c:25)
at main.bundle.js:1
Has there any solution been identified for this issue

[chasejarms]

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.

[filipesilva]

For people having the Runtime TypeError ("Cannot read property 'call' of undefined") error when using --build-optimizer, there is a fix in https://github.com/angular/devkit/pull/201. This fix should be released in @angular-devkit/[email protected].

This bug affected libraries packages with webpack. The problem was that build optimizer added require() calls to tslib, that failed lookup since since the library had its own custom __webpack_require__ function (with its own list of modules).

For users that get the Runtime TypeError ("Cannot read property 'call' of undefined") error when NOT using --build-optimizer, please provide a minimal repro.

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

So far the cases I've seen seem related to the way code is being deployed. If you are using a custom index.html and include script tags out of order from dist/index.html, you will get this error. Make sure to use the same order.

This error generally means that Webpack was not able to find a module the application needs. If you include scripts out of order, you might not have all the packages you need loaded at the right time.

[dmsam]

An update to bootstrap version to 1.9.3 has resolved the issue in our team. And was required to do browser refresh continuously initially to get it work.
Package.json was updated with the below version for ngx-bootstrap
"ngx-bootstrap": "^1.9.3"

[kenji-1996]

Can someone explain a fix as 'dumbed down' as possible?
Im not loading my scripts in a weird way just got a normal app ive got angualr material on and im getting this ever, how do i apply this 'fix'?

edit: I just ran this

ng build --prod --base-href /new/ --build-optimizer

and it has compiled onto my live server fine?

[kenji-1996]

Made a post on stackoverflow outlining the problem and the current solution, If I should add more information/am missing anything there please @ me here with what I should update
@filipesilva is my post relevant/suitable?

https://stackoverflow.com/questions/46720805/cannot-read-property-call-of-undefined-angular-2-build-error-potential-solu/46720806?noredirect=1#comment80388366_46720806

[mariannafld]

@filipesilva,
The simple application to test deployment problem is uploaded to github.
https://github.com/mariannafld/SysMngCommunicator.
Navigate to http://localhost:3200/.
For deployment following command is used:
ng build --env=prod --output-hashing none

[filipesilva]

@kenji-1996 the fix for people having this problem with build optimizer is to reinstall node_modules, which should pick up @angular-devkit/[email protected] automatically. You can check which version you have with npm ls @angular-devkit/build-optimizer.

@mariannafld in your repro project I tried running ng build --env=prod --output-hashing none and opening http://localhost:4200/ in my browser. I did not see any error. If I had to bet you're running into cache problems on your deployment, but that's not something we can help you with here.

[kenji-1996]

@filipesilva updated my stackoverflow post to include the new information you gave me, Thanks!

https://stackoverflow.com/questions/46720805/cannot-read-property-call-of-undefined-angular-2-build-error-potential-solu/46720806#46720806

[playground]

I'm getting a similar runtime error

polyfills.bundle.js:formatted:3431 Uncaught TypeError: Cannot read property 'type' of undefined

Running cli 1.4.0

[bookofdom]

I'm getting this error while running the starter

steps:

1. update to ionic@latest
2. ionic start appName super
3. ionic serve

repo: https://github.com/bookofdom/ionic-issue

[drdtdavan]

ionic
cached serviceworker.js caused the problem for me.
had it enabled initially.
then commented it out.
but it was still cached in browser.
cleared cache and works fine now.

[gihanmu]

@richardsengers Thanks it worked. I had zone.js 0.8.14 and downgrading it to 0.8.12 fixed the issue

[dantheman999301]

I had a similar issue with this but just running a fresh npm install fixed the problem, so not sure what particular mismatch it was in terms of dependencies.

Like having fun with the GAC all over again!

[sqwk]

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.

[erhard]

```
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.

`

Lade Vordialog...

.......

`

[Poseiden]

@erhard Cool guy ! l have set __Zone_enable_cross_context_check = true to solve some issues under IE and forgot to add annotation so that chrome doesn't work fine. You made me realize that. [BUG] IE11 -> Can't execute code from a freed script

[esoyke]

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.

[FernandoX7]

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

[kylecordes]

The idea from @FernandoX7 and others doesn't help much, for those of us who want output hashing.

[pbredenberg]

I ran into this exact same problem with a Vue.js project tonight. Updating webpack 3.6.0 to 3.10.0 fixed it for me.

[hamouda06]

@filipesilva
Hello filipesilva we have also the same problem in our project , it work correctly with ng serve ( dev mode ) but not on the server.
In AOT mode ( -prod) i noted that the script vendor scripts bundle is missing even with empty new project , is'it normal ?
Thank you !

[varadero]

@filipesilva - here is a repro:
https://github.com/webpack/webpack/issues/959#issuecomment-358968281

https://github.com/KillerCodeMonkey/ngx-quill/issues/102

[michaelwaihenya]

I had the same problem where everything was working then failed. using @FernandoX7 worked

ng build --prod --aot --output-hashing none

[kylecordes]

There are various references to the --output-hashing none workaround... it works, but it's a problem for those of us who need output hashing on. A different workaround also gets things back up and running: --common-chunk false, though it's not clear how much this affects output size for various projects. It was discussed at length in #7021.

[hamouda06]

Hello,

In our case it was an import of third part library that cause the error ....

[varadero]

@kylecordes The workaround I found at:
https://github.com/webpack/webpack/issues/959#issuecomment-358968281

is to add --sourcemaps:

ng build --prod --sourcemaps

@hamouda06 - In my case too - importing QuillModule from ngx-quill

[andyrue]

Updating to the recent @angular/[email protected] version has resolved this issue for me.

[varadero]

@andyrue I can confirm the same. Just upgraded from Angular-CLI 1.6.5 to 1.6.6 and the issues is now gone.

[aford22]

I was hitting this same problem with prod builds. Workaround was to add --sourcemaps to the ng build command line. Without this parameter I keep hitting the problem

[segersrobbert]

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

[riturajratan]

anyone find any solution :)

[richardsengers]

try ng update if none of the above works for you

[ravinsingh890]

Simply add the scripts in below mentioned order and it will work 👍

`

`

Happy Coding !!!

Thanks,
Ravin

[shuodongLou]

still getting this error...

my zone.js version is 0.8.18 so i don't think it still has the bug in version 0.8.13

and the order of scripts in my index.html is exactly as recommened: main.bundle.js goes after vendor.bundle.js

[ravinsingh890]

In my case order was the issue. Mine zone.js version is 0.8.19. The issue is still reproducible if I change the scripts order.

[vultix]

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

[AndrewEckart]

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.

[ammuench]

Same issue as @AndrewEckart, getting frustrated having to kill and restart an aot build every time I make changes

[barocsi]

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.

[rakishii13]

I am getting the same error when using ng build --watch on aot and enabled sourcemaps.

[AndreasHald]

We have the same error as @AndrewEckart, everything serves fine, but on rebuild, the error is thrown

[Nexeuz]

Same Issue, fixes when rebuild application, problem occurs when for example move a module to another folder.

[levarberry]

The solution for me was rather simple. Clear cache and hard reload. This seems to happen when I add a new page or service and don't restart the dev server.

[mgechev]

Looks like it's related to the view engine compiler. With the transition to ivy, this will hopefully be fixed in the next months.

Closing the issue for now but we should definitely revisit it once we release ngtsc. The workarounds from above provide a sufficient solution for now. The cold webpack start would also get faster in webpack v5, so the inconvenience from the build restart will drop further.

Still, if I'm missing anything, feel free to create a new issue with details and demo where we can reproduce the problem.

[HarshitChhipa]

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)

@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

Was this for entry field there should follow this order.
SomeWhere else.

[varunrajasekhar]

I did have a webpack version 4.8.3.

I changed my webpack.config.js to export a function instead of an object and then I ran the command
npm install webpack@latest

The webpack version 4.33.0 (after I did npm install webpack@latest -> 4.33.0) seems to have the fix for this.

Boom my issue was resolved.

The one thing I dont understand is that the I havent changed any configuration nor I have changed any code since 60days prior to todays date(june 4th). This version of webpack seems to have some issue that did not come up when I first started using it.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

<sub>_This action has been performed automatically by a bot._</sub>