webpackJsonp is not defined

[fabienbranchel]

Bug Report or Feature Request (mark with an x)

- [x] bug report 
- [ ] feature request

Versions.

Output from: ng --version.
@angular/cli: 1.4.6
node: 6.11.3
os: darwin x64
@angular/animations: 4.4.4
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.6
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
@angular/service-worker: 1.0.0-beta.16
typescript: 2.3.4
macOS Sierra 10.12.6

Android Devices :

• Samsung Galaxy S7 Edge, Android 7.0, Chrome 61.0.3163.98
• Motorola Moto E4, Android 7.1.1, Chrome 61.0.3163.98
• Pixel C, Android 8.0, Chrome 61.0.3163.98

Repro steps.

I have a webapp with a SW (generate by CLI), I build it with the "ng build --prod" command.

• Open the webapp in Chrome on Android Device
• Close Chrome
• Repeat open (the webapp opened previously reload)/close Chrome few times, and the error happen

Important : I can't reproduce it without a registered SW.

OR

• Install app on Android Device
• Repeat open/close the app few times, and the error happen

I can't reproduce the error on my Mac.

The log given by the failure.

 Uncaught ReferenceError: webpackJsonp is not defined at sw-register.cddb6ecf3e30717910a9.bundle.js:1 

Desired functionality.

Webapp launch & display OK.

Mention any other details that might be useful.

I've already find this similar issue : #4998
But my uglify version is 3.

[filipesilva]

webpackJsonp is not defined usually mean you are not loading the javascript bundles in the right order. They must be loaded in the order present in the index.html that the CLI generates.

Can you setup a minimal repro please? 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.

[flyher]

@filipesilva
I meet the same issue after add jquery and bootstrap in webpack.config.js ,
i try to adjust the loading order ,but it didn‘t work.
you can see the code here

thank you!

#7583

[natcohen]

Having the same issue here... building with -aot (dev) works fine. Prod compiles without complaint but when loading the app on the browser, it returns the following errors:

polyfills.900aaf0d520c2ec873a7.bundle.js:1 Uncaught ReferenceError: webpackJsonp is not defined
    at polyfills.900aaf0d520c2ec873a7.bundle.js:1
(anonymous) @ polyfills.900aaf0d520c2ec873a7.bundle.js:1
vendor.b3b1073e85b443c9b6c3.bundle.js:1 Uncaught ReferenceError: webpackJsonp is not defined
    at vendor.b3b1073e85b443c9b6c3.bundle.js:1
(anonymous) @ vendor.b3b1073e85b443c9b6c3.bundle.js:1
main.dfb485d3367f26ac4251.bundle.js:1 Uncaught ReferenceError: webpackJsonp is not defined
    at main.dfb485d3367f26ac4251.bundle.js:1
(anonymous) @ main.dfb485d3367f26ac4251.bundle.js:1

[LapassetAlexis]

I have same issue only on IE 11

[oshingc]

Same issue here.

[yadoble]

Same issue here, ng serve works fine, but ng build to deploy the app in bluemix is not working properly

[royjulien]

Same issue. Local build works fine loading both the localhost:4200 and localhost:4200/[viewcomponent].

As soon as I push it live:
The base url works and navigating to other pages works as well however
Loading a page directly gives the following error:

inline.7188b140d50c544cd4d6.bundle.js:1 
Uncaught SyntaxError: Unexpected token <

polyfills.900aaf0d520c2ec873a7.bundle.js:1 
Uncaught ReferenceError: webpackJsonp is not defined

vendor.945e35d73f0e55b0c5f4.bundle.js:1 
Uncaught SyntaxError: Unexpected token <

main.bd9155fd1f2baada6b7b.bundle.js:1 
Uncaught SyntaxError: Unexpected token <

[fabienbranchel]

@filipesilva :

Time pass, I was using Workbox in production and then I try again with the release of Angular 5.
I now use Angular 5.1, with Angular CI 1.6 and Angular Service Worker 5.0.
The issue seems to be fix with my use case.

I proceed to a lot of tests in the same conditions than before with previouses versions, and all is working as expected.

[luizptm]

@fabienbranchel :

Could you send me a example of your package.json file, please?

Thanks a lot.

[fabienbranchel]

@luizptm :

{
  "name": "test",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --aot",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.1.0",
    "@angular/cdk": "^5.0.0",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/material": "^5.0.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/router": "^5.1.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.6",
    "@angular/compiler-cli": "^5.1.0",
    "@angular/language-service": "^5.1.0",
    "@angular/service-worker": "^5.1.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~4.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.2.0",
    "tslint": "~5.3.2",
    "typescript": "2.4.2"
  }
}

[luizptm]

Thanks, @fabienbranchel.
I am still having this issue. I changed the angular dependencies to version 5 as above and it not worked.
Could someone help me, please?

[fabienbranchel]

@luizptm : have you tried with the exact same versions of all depencies as above ?

[luizptm]

Yes, I tried it and nothing happen. It shows the same error.

[Len0re]

I had the same problem a while ago, turned out it was a problem with my browser (chrome). I cleaned the cache and then it worked great.

[luizptm]

Hi Len0re,

I was using another browser (Maxthon) and I tried now on Chrome for the first time and I received the same error.
The first generated file that was showed was style.ac1cb6d1ddd09746eac0.js.

Thanks for your help.

[adrienlamotte]

I had the same kind of error in production only, on a NodeJS server...
Turns out I just forgot to restart the server !

[luizptm]

Could you be more specific? How ca I do this?

Thanks for helping.

[adrienlamotte]

@luizptm really can't tell you as it depend on your server...
We use foreverjs, so to restart I use something like : forever restart myproject

[goelinsights]

I'm getting the same problem showing up when I put a CDN in front of express...goes away when I invalidate the cache. Any reason this would pop up with the way a CDN stores/ distributes the files?

[thenninger]

Getting the same problem only sometimes though when loading production build in browser.

[oztek22]

looks like this is the same issue. It happens after I bundled my Angular app using browsserify and embedded it on page where webpackJsonp was already added.

Is there any way I can conditionally remove it from execution?

[alan-agius4]

Closing as no reproduction was provided.

If the problem persists, please open a new issue following our submission guidelines.

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.

[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.}