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?