Angular 8 error on Safari 10 Mobile (iOS 10.3.3 iPad): "Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten"

[Ks89]

🐞 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, you cannot run 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.d1c9edb576425b4c6fb4.js:1:78504)
	bootstrapModuleFactory (main-es5.d1c9edb576425b4c6fb4.js:1:85139)
	zUnb (main-es5.d1c9edb576425b4c6fb4.js:1:248620)
	f (runtime-es2015.703a23e48ad83c851e49.js:1:512)
	(anonymous function) (main-es5.d1c9edb576425b4c6fb4.js:1:88)
	f (runtime-es2015.703a23e48ad83c851e49.js:1:512)
	t (runtime-es2015.703a23e48ad83c851e49.js:1:378)
	(anonymous function) (runtime-es2015.703a23e48ad83c851e49.js:1:1418)
	Module Code (runtime-es2015.703a23e48ad83c851e49.js:1:1437)
	evaluate
	moduleEvaluation

I already talked about this issue HERE, but the discussion is dead, so I decided to create a new dedicated issue
In issue #30928 the problems seems fixed, but it's not true, because it happens also with a basic app created by ng new.

🔬 Minimal Reproduction

1. create a new project with ng new ng-safari10 with routing and SCSS (probably they aren't mandatory to reproduce this issue)
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

2. build with ng build --prod --aot or ng build
3. cd dist/ng-safari10 && lite-server

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.d1c9edb576425b4c6fb4.js:1:78504)
	bootstrapModuleFactory (main-es5.d1c9edb576425b4c6fb4.js:1:85139)
	zUnb (main-es5.d1c9edb576425b4c6fb4.js:1:248620)
	f (runtime-es2015.703a23e48ad83c851e49.js:1:512)
	(anonymous function) (main-es5.d1c9edb576425b4c6fb4.js:1:88)
	f (runtime-es2015.703a23e48ad83c851e49.js:1:512)
	t (runtime-es2015.703a23e48ad83c851e49.js:1:378)
	(anonymous function) (runtime-es2015.703a23e48ad83c851e49.js:1:1418)
	Module Code (runtime-es2015.703a23e48ad83c851e49.js:1:1437)
	evaluate
	moduleEvaluation

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

[Ks89]

Also, It seems related to angular/angular#31103, but it's closed and I'm still having the same problem.

[alan-agius4]

Hi @Ks89, that is because IOS Safari 10.3 and Safari 10.1 require a polyfill for nomodule script tags not to be executed. However, this is not being included in your project.

This is because in your browserslist you are not stating that you don't want to support the mentioned browsers. In fact, the parsed browserslist it shows that they shouldn't be supported.

Extract from the above;

ios_saf 12.0-12.1
ios_saf 11.3-11.4
ios_saf 10.0-10.2
safari 12.1
safari 12
safari 10
safari 5.1

If you want to supported the mentioned browsers these need to be update your query to include all minor and major version of Safari

Ex:

ios_saf >= 10
Safari >= 10

You can also check the queries here: https://browserl.ist

[Ks89]

Oh damn, you are right.

Now it's working.

thanks

[agiratech-vigneshm]

I am facing the same issue and here is my browserlist file,

> 0.5%
last 2 versions
safari >= 10
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

I am not that much familiar with browserlist, Can someone please help me?

[Ks89]

I am facing the same issue and here is my browserlist file,

> 0.5%
last 2 versions
safari >= 10
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

I am not that much familiar with browserlist, Can someone please help me?

If you have issues with Safari Mobile 10, the solution is in the last post of alan-agius4.

[agiratech-vigneshm]

This is happening in safari 10 desktop.

[Ks89]

This is happening in safari 10 desktop.

I don't know, with the solution above for me it's ok.
Try to run npx browserslist to see if you can find Safari 10. If not, try to change not dead or other rows in your browserlist file to see if Safari 10 appears.

[agiratech-vigneshm]

The browserslist file should be inside the src folder or in the root? I checked a newly created project and it was inside src by default. So I assumed it and created one in my project's src. Sorry to bother you with so many questions. If I run the npx browserslist within src folder safari 10 shows up, but not when I run it in the root.

[SpellChucker]

@agiratech-vigneshm In Angular 7 it was in the src folder, now with Angular 8 it is in the root.

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