search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.74k stars 11.98k forks source link

Angular 8 error on Safari 10 Mobile (iOS 10.3.3 iPad) with LAZY LOADING: Unhandled promise rejection ChunkLoadError: Loading chunk 3 failed. #15153

Closed Ks89 closed 5 years ago

Ks89 commented 5 years ago

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 7.x.x

Description

If you create an empty app with ng new and you add a lazy loading module, you cannot navigate to it on Safari 10 Mobile (iOS 10.3.3), because it throws this error on console:

[Error] Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)
    assertZonePatched (polyfills-es5.2219c87348e60efc0076.js:1:3142)
    t (main-es5.0cfc06a85b4aabcf1131.js:1:92360)
    bootstrapModuleFactory (main-es5.0cfc06a85b4aabcf1131.js:1:99037)
    zUnb (main-es5.0cfc06a85b4aabcf1131.js:1:282885)
    i (runtime-es2015.41da514e8f2d4a5eb4ab.js:1:512)
    (anonymous function) (main-es5.0cfc06a85b4aabcf1131.js:1:509)
    i (runtime-es2015.41da514e8f2d4a5eb4ab.js:1:512)
    t (runtime-es2015.41da514e8f2d4a5eb4ab.js:1:378)
    (anonymous function) (runtime-es2015.41da514e8f2d4a5eb4ab.js:1:2218)
    Module Code (runtime-es2015.41da514e8f2d4a5eb4ab.js:1:2237)
    evaluate
    moduleEvaluation

[Error] Unhandled promise rejection
ChunkLoadError: Loading chunk 3 failed. (missing: https://MY_WEBSITE_URL/3-es5.82fc84282af4a28481b3.js)
e — runtime-es5.c74097c1ec5dce0ff171.js:1:895
b — main-es5.0cfc06a85b4aabcf1131.js:1:281062
loadModuleFactory — main-es5.0cfc06a85b4aabcf1131.js:1:211714
load — main-es5.0cfc06a85b4aabcf1131.js:1:211439
(anonymous function) — main-es5.0cfc06a85b4aabcf1131.js:1:199230
_tryNext — main-es5.0cfc06a85b4aabcf1131.js:1:273758
_next — main-es5.0cfc06a85b4aabcf1131.js:1:273661
next — main-es5.0cfc06a85b4aabcf1131.js:1:140060
(anonymous function) — main-es5.0cfc06a85b4aabcf1131.js:1:155655
_trySubscribe — main-es5.0cfc06a85b4aabcf1131.js:1:4222
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:4011
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
_innerSub — main-es5.0cfc06a85b4aabcf1131.js:1:273955
_tryNext — main-es5.0cfc06a85b4aabcf1131.js:1:273839
_next — main-es5.0cfc06a85b4aabcf1131.js:1:273661
next — main-es5.0cfc06a85b4aabcf1131.js:1:140060
_next — main-es5.0cfc06a85b4aabcf1131.js:1:3121
next — main-es5.0cfc06a85b4aabcf1131.js:1:140060
(anonymous function) — main-es5.0cfc06a85b4aabcf1131.js:1:212
_trySubscribe — main-es5.0cfc06a85b4aabcf1131.js:1:4222
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:4011
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
_innerSub — main-es5.0cfc06a85b4aabcf1131.js:1:273955
_tryNext — main-es5.0cfc06a85b4aabcf1131.js:1:273839
_next — main-es5.0cfc06a85b4aabcf1131.js:1:273661
next — main-es5.0cfc06a85b4aabcf1131.js:1:140060
(anonymous function) — main-es5.0cfc06a85b4aabcf1131.js:1:155655
_trySubscribe — main-es5.0cfc06a85b4aabcf1131.js:1:4222
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:4011
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
_innerSub — main-es5.0cfc06a85b4aabcf1131.js:1:164007
_next — main-es5.0cfc06a85b4aabcf1131.js:1:163820
next — main-es5.0cfc06a85b4aabcf1131.js:1:140060
notifyNext — main-es5.0cfc06a85b4aabcf1131.js:1:164425
_next — main-es5.0cfc06a85b4aabcf1131.js:1:276585
next — main-es5.0cfc06a85b4aabcf1131.js:1:140060
(anonymous function) — main-es5.0cfc06a85b4aabcf1131.js:1:155416
(anonymous function) — polyfills-es5.2219c87348e60efc0076.js:1:53556
r — polyfills-es5.2219c87348e60efc0076.js:1:108555
onInvoke — main-es5.0cfc06a85b4aabcf1131.js:1:92888
run — polyfills-es5.2219c87348e60efc0076.js:1:4489
(anonymous function) — polyfills-es5.2219c87348e60efc0076.js:1:16462
onInvokeTask — main-es5.0cfc06a85b4aabcf1131.js:1:92804
runTask — polyfills-es5.2219c87348e60efc0076.js:1:5156
g — polyfills-es5.2219c87348e60efc0076.js:1:12238
invokeTask — polyfills-es5.2219c87348e60efc0076.js:1:11077
b — polyfills-es5.2219c87348e60efc0076.js:1:24276
m — polyfills-es5.2219c87348e60efc0076.js:1:24501
    exports (polyfills-es5.2219c87348e60efc0076.js:1:75027)
    X (polyfills-es5.2219c87348e60efc0076.js:1:53931)
    (anonymous function) (polyfills-es5.2219c87348e60efc0076.js:1:54079)
    exports (polyfills-es5.2219c87348e60efc0076.js:1:52321)
    (anonymous function) (polyfills-es5.2219c87348e60efc0076.js:1:54031)
    onInvokeTask (main-es5.0cfc06a85b4aabcf1131.js:1:92804)
    runTask (polyfills-es5.2219c87348e60efc0076.js:1:5156)
    invokeTask (polyfills-es5.2219c87348e60efc0076.js:1:11054)
    (anonymous function) (polyfills-es5.2219c87348e60efc0076.js:1:40679)
    i (browser-sync-client.js:15:55194)
    s (browser-sync-client.js:15:55372)
    r (browser-sync-client.js:15:55905)

I already talked about this issue HERE, but the discussion is dead, so I decided to create a new dedicated issue Is it a consequence of the first error "Error: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten" explained here #31816?

🔬 Minimal Reproduction

I created a repo to show this issue https://github.com/Ks89/ng-safari10-lazy-issue

However, if you want to create a new project by yourself:

  1. create a new project with ng new ng-safari10-lazy with routing and SCSS

  2. use this browserslist file content

    > 0.5%
last 2 versions
Firefox ESR
not dead
IE 11
Firefox 67
Safari 10
ios_saf 10

  3. Check the output of npm browserslist to see if there is 'ios_saf 10.0-10.2':

and_chr 75
and_ff 67
and_qq 1.2
and_uc 11.8
android 67
baidu 7.12
chrome 75
chrome 74
chrome 73
chrome 72
edge 18
edge 17
firefox 67
firefox 66
firefox 60
ie 11
ie_mob 11
ios_saf 12.2
ios_saf 12.0-12.1
ios_saf 11.3-11.4
ios_saf 10.0-10.2
kaios 2.5
op_mini all
op_mob 46
opera 58
opera 57
safari 12.1
safari 12
safari 10
safari 5.1
samsung 9.2
samsung 8.2
samsung 4
  1. add a lazy loaded module
  2. build with ng build --prod --aot or ng build
  3. cd dist/ng-safari10 && lite-server

When you navigate to the lazy loaded module (for instance with router.navigate(['lazy'])), it will appear the error shown in this issue.

This is the package.json created automatically by ng new:

  "dependencies": {
    "@angular/animations": "~8.1.2",
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }

If you need more info, feel free to ask.

🔥 Exception or Error


[Error] Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)
    assertZonePatched (polyfills-es5.2219c87348e60efc0076.js:1:3142)
    t (main-es5.0cfc06a85b4aabcf1131.js:1:92360)
    bootstrapModuleFactory (main-es5.0cfc06a85b4aabcf1131.js:1:99037)
    zUnb (main-es5.0cfc06a85b4aabcf1131.js:1:282885)
    i (runtime-es2015.41da514e8f2d4a5eb4ab.js:1:512)
    (anonymous function) (main-es5.0cfc06a85b4aabcf1131.js:1:509)
    i (runtime-es2015.41da514e8f2d4a5eb4ab.js:1:512)
    t (runtime-es2015.41da514e8f2d4a5eb4ab.js:1:378)
    (anonymous function) (runtime-es2015.41da514e8f2d4a5eb4ab.js:1:2218)
    Module Code (runtime-es2015.41da514e8f2d4a5eb4ab.js:1:2237)
    evaluate
    moduleEvaluation

[Error] Unhandled promise rejection
ChunkLoadError: Loading chunk 3 failed. (missing: https://MY_WEBSITE_URL/3-es5.82fc84282af4a28481b3.js)
e — runtime-es5.c74097c1ec5dce0ff171.js:1:895
b — main-es5.0cfc06a85b4aabcf1131.js:1:281062
loadModuleFactory — main-es5.0cfc06a85b4aabcf1131.js:1:211714
load — main-es5.0cfc06a85b4aabcf1131.js:1:211439
(anonymous function) — main-es5.0cfc06a85b4aabcf1131.js:1:199230
_tryNext — main-es5.0cfc06a85b4aabcf1131.js:1:273758
_next — main-es5.0cfc06a85b4aabcf1131.js:1:273661
next — main-es5.0cfc06a85b4aabcf1131.js:1:140060
(anonymous function) — main-es5.0cfc06a85b4aabcf1131.js:1:155655
_trySubscribe — main-es5.0cfc06a85b4aabcf1131.js:1:4222
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:4011
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
_innerSub — main-es5.0cfc06a85b4aabcf1131.js:1:273955
_tryNext — main-es5.0cfc06a85b4aabcf1131.js:1:273839
_next — main-es5.0cfc06a85b4aabcf1131.js:1:273661
next — main-es5.0cfc06a85b4aabcf1131.js:1:140060
_next — main-es5.0cfc06a85b4aabcf1131.js:1:3121
next — main-es5.0cfc06a85b4aabcf1131.js:1:140060
(anonymous function) — main-es5.0cfc06a85b4aabcf1131.js:1:212
_trySubscribe — main-es5.0cfc06a85b4aabcf1131.js:1:4222
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:4011
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
_innerSub — main-es5.0cfc06a85b4aabcf1131.js:1:273955
_tryNext — main-es5.0cfc06a85b4aabcf1131.js:1:273839
_next — main-es5.0cfc06a85b4aabcf1131.js:1:273661
next — main-es5.0cfc06a85b4aabcf1131.js:1:140060
(anonymous function) — main-es5.0cfc06a85b4aabcf1131.js:1:155655
_trySubscribe — main-es5.0cfc06a85b4aabcf1131.js:1:4222
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:4011
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
subscribe — main-es5.0cfc06a85b4aabcf1131.js:1:3880
_innerSub — main-es5.0cfc06a85b4aabcf1131.js:1:164007
_next — main-es5.0cfc06a85b4aabcf1131.js:1:163820
next — main-es5.0cfc06a85b4aabcf1131.js:1:140060
notifyNext — main-es5.0cfc06a85b4aabcf1131.js:1:164425
_next — main-es5.0cfc06a85b4aabcf1131.js:1:276585
next — main-es5.0cfc06a85b4aabcf1131.js:1:140060
(anonymous function) — main-es5.0cfc06a85b4aabcf1131.js:1:155416
(anonymous function) — polyfills-es5.2219c87348e60efc0076.js:1:53556
r — polyfills-es5.2219c87348e60efc0076.js:1:108555
onInvoke — main-es5.0cfc06a85b4aabcf1131.js:1:92888
run — polyfills-es5.2219c87348e60efc0076.js:1:4489
(anonymous function) — polyfills-es5.2219c87348e60efc0076.js:1:16462
onInvokeTask — main-es5.0cfc06a85b4aabcf1131.js:1:92804
runTask — polyfills-es5.2219c87348e60efc0076.js:1:5156
g — polyfills-es5.2219c87348e60efc0076.js:1:12238
invokeTask — polyfills-es5.2219c87348e60efc0076.js:1:11077
b — polyfills-es5.2219c87348e60efc0076.js:1:24276
m — polyfills-es5.2219c87348e60efc0076.js:1:24501
    exports (polyfills-es5.2219c87348e60efc0076.js:1:75027)
    X (polyfills-es5.2219c87348e60efc0076.js:1:53931)
    (anonymous function) (polyfills-es5.2219c87348e60efc0076.js:1:54079)
    exports (polyfills-es5.2219c87348e60efc0076.js:1:52321)
    (anonymous function) (polyfills-es5.2219c87348e60efc0076.js:1:54031)
    onInvokeTask (main-es5.0cfc06a85b4aabcf1131.js:1:92804)
    runTask (polyfills-es5.2219c87348e60efc0076.js:1:5156)
    invokeTask (polyfills-es5.2219c87348e60efc0076.js:1:11054)
    (anonymous function) (polyfills-es5.2219c87348e60efc0076.js:1:40679)
    i (browser-sync-client.js:15:55194)
    s (browser-sync-client.js:15:55372)
    r (browser-sync-client.js:15:55905)

🌍 Your Environment


Angular CLI: 8.1.2
Node: 10.16.0
OS: darwin x64
Angular: 8.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.2
@angular-devkit/build-angular     0.801.2
@angular-devkit/build-optimizer   0.801.2
@angular-devkit/build-webpack     0.801.2
@angular-devkit/core              8.1.2
@angular-devkit/schematics        8.1.2
@ngtools/webpack                  8.1.2
@schematics/angular               8.1.2
@schematics/update                0.801.2
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

Anything else relevant? Safari 10 for iPad with iOS 10.3.3, if you need mode info about iPad model feel free to ask.

alan-agius4 commented 5 years ago

Duplicate of https://github.com/angular/angular-cli/issues/15152

angular-automatic-lock-bot[bot] commented 5 years ago

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.