Angular 5 应用程序在 ios8（浏览器堆栈）中不起作用

Question

我已经在运行 IOS8 (Safari) 的 iPhone 6 和 Browserstack 中测试了我的 Angular 5 应用程序。angular 应用程序没有运行，我只是得到一个空页面和这个 Javascript 错误。

有什么建议？

这是我的 package.json 文件。我认为我在此处添加的某些包导致了一些冲突并阻止了应用程序的显示。以前我的应用程序能够在 IOS8 中运行，但那是在 Angular 4.4 中运行的，我没有使用 mdbootstrap 库。

{
    "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"
    }
}

Answer 1

有类似的问题。应该通过提供正确的 polyfill 来解决。

您可以在此处找到浏览器支持信息https://angular.io/guide/browser-support

如果您使用 JIT 编译器（不是 AOT），那么 safari 至少需要 ES7 反射 polyfill。Safari 7 & 8 也需要 ES6

如果您仍然使用旧的基于 intl 的管道，请不要忘记包含它们。

对于较旧的浏览器，core-js/es/...导入通常可以解决问题。

转到您的src/polyfills.ts并启用所需的 polyfill。

在生成的项目的自述文件中也提到了一个 fetch polyfill，它没有包含在polyfill.ts.

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