Angular 5 app not working in ios8 (Browserstack)

Question

I've tested my Angular 5 app on an iPhone 6 running IOS8 (Safari) and in Browserstack. The angular app doesn't run, I just get an empty page and this Javascript error.

Any suggestions?

This is my package.json file. I'm thinking that some package that I added here is causing some conflict and preventing the app from displaying. Previously I had the app able to run in IOS8, but that was with Angular 4.4 and I wasn't using mdbootstrap library.

{
    "name": "XXXX",
    "version": "1.0.0",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "i18n": "ng-xi18n"
    },
    "private": true,
    "dependencies": {
        "@agm/core": "^1.0.0-beta.2",
        "@angular-devkit/schematics": "0.0.34",
        "@angular/animations": "^5.0.3",
        "@angular/common": "^5.0.3",
        "@angular/compiler": "^5.0.3",
        "@angular/core": "^5.0.3",
        "@angular/forms": "^5.0.3",
        "@angular/http": "^5.0.3",
        "@angular/platform-browser": "^5.0.3",
        "@angular/platform-browser-dynamic": "^5.0.3",
        "@angular/router": "^5.0.3",
        "applicationinsights-js": "^1.0.8",
        "bootstrap": "^3.3.7",
        "bootstrap-select": "^1.12.4",
        "chart.js": "^2.5.0",
        "core-js": "^2.4.1",
        "easy-pie-chart": "^2.1.7",
        "font-awesome": "^4.7.0",
        "hammerjs": "^2.0.8",
        "jquery": "^3.2.1",
        "libphonenumber-js": "^0.4.40",
        "ng-autosize": "^1.1.0",
        "ng-mdb-pro": "XXXX",
        "npm-check-updates": "^2.13.0",
        "rxjs": "^5.4.2",
        "screenfull": "^3.3.0",
        "zone.js": "^0.8.14"
    },
    "devDependencies": {
        "@angular/cli": "^1.5.5",
        "@angular/compiler-cli": "^5.0.3",
        "@angular/language-service": "^4.3.0",
        "@types/applicationinsights-js": "^1.0.2",
        "@types/jasmine": "~2.8.2",
        "@types/jasminewd2": "~2.0.2",
        "@types/node": "~6.0.60",
        "codelyzer": "~4.0.1",
        "jasmine-core": "^2.8.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~1.7.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^1.2.1",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "karma-junit-reporter": "^1.2.0",
        "protractor": "~5.2.0",
        "ts-node": "~3.3.0",
        "tslint": "^5.3.2",
        "typescript": ">=2.4.2 <2.5.0"
    }
}

Can you get a little more information about the error ? or to post somewhere the app ? It seems to be a bundle error (something is not included) or the browser stack is pointing to a wrong index html. But I will need more details to be able to help you — Nicu, Dec 18 '17 at 13:11
I experienced a error with intl when running in safari which was apart from the other browsers. — Nicu, Dec 18 '17 at 13:14
I've added my package.json file. I can't post the app live yet. Browser stack is loading the index.html as I can see the title. It's the that isn't working — CaptainMorgan, Dec 18 '17 at 22:55

Vojtech · Accepted Answer · 2018-01-24T11:08:02.340

6

Had a similar problem. It should be resolved by providing correct polyfills.

you can find browser support info here https://angular.io/guide/browser-support

If you use JIT compiler (not AOT) then safari needs at least ES7 reflect polyfill. Safari 7 & 8 need also ES6

If you still use the old intl based pipes then do not forget to include them.

For older browsers core-js/es/... imports usually resolve the issues.

Go to your src/polyfills.ts and enable desired polyfills.

There is also a fetch polyfill mentioned in the readme of the generated project, that is not included in polyfill.ts.

import 'whatwg-fetch'; // Run `npm install --save whatwg-fetch`

edited Jan 24 '18 at 11:08

answered Dec 22 '17 at 12:05

Vojtech

2,756
2
19
29

I'm not sure what kind of compiler I use. I just compile with "ng build". My polyfills.ts has the following enabled: import 'core-js/es6/reflect'; import 'core-js/es7/reflect'; import 'zone.js/dist/zone'; – CaptainMorgan Jan 04 '18 at 00:30
If you generate new empty app using angular cli and enable + install all pollyfills, does the app load on desired safari? – Vojtech Jan 18 '18 at 13:47
If your issue is still present, try to add the fetch polyfill as mentioned in the edited answer – Vojtech Jan 24 '18 at 11:09

score 0 · Answer 2 · answered Jun 22 '18 at 17:41

0

$ ng build --mangle safari10=true --prod

answered Jun 22 '18 at 17:41

thxmxx

447
4
9

2

Can you provide more context? – Nico Haase Jun 22 '18 at 19:48

score 0 · Answer 3 · answered Oct 10 '21 at 18:37

Follow the next steps

Execute command to generate file .browserslistrc

npx browserslist

Into the file set the last version until you get that you need, in my case I need work with safari 10, then i set the file ".browserslistrc" :

last 2 Chrome version
last 2 Firefox version
last 2 Edge major versions
last 5 Safari major versions
last 5 iOS major versions

Angular 5 app not working in ios8 (Browserstack)

3 Answers3

Linked