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

[ghost]

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 webpack/webpack#959 and PatrickJS/PatrickJS-starter#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
#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:
webpack-contrib/extract-text-webpack-plugin#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

[varadero]

@filipesilva - here is a repro:
webpack/webpack#959 (comment)

KillerCodeMonkey/ngx-quill#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:
webpack/webpack#959 (comment)

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

[bitsagarob]

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 👍

`<script type="text/javascript" src="/bundles/inline.bundle.js"></script>

<script type="text/javascript" src="/bundles/polyfills.bundle.js"></script> <script type="text/javascript" src="/bundles/scripts.bundle.js"></script> <script type="text/javascript" src="/bundles/vendor.bundle.js"></script> <script type="text/javascript" src="/bundles/main.bundle.js"></script>`

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)

<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

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]

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.

_{This action has been performed automatically by a bot.}