Question

Angular 5.2.5网站。该网站可以在Chrome，Firefox，IE和Edge上正常运行。在Safari中，网站第一次加载时（或每次我禁用缓存时），内容就在其中，但看起来颜色和背景颜色是相同的。我删除了网站自定义CSS，并给出了相同的行为。如果用户启用了缓存并且注销了，则重新登录内容将正确显示为正确的颜色。在下面的屏幕截图中，我使用鼠标突出显示了文本字段，只是为了表明组件已正确加载到路线中，但所有内容都是背景色。我还包括了package.json。

package.json

{
  "name": "mss",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "keywords": [],
  "author": "JFI",
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/animations": "5.2.5",
    "@angular/cdk": "5.2.5",
    "@angular/cli": "1.7.3",
    "@angular/common": "5.2.5",
    "@angular/compiler": "5.2.5",
    "@angular/compiler-cli": "5.2.5",
    "@angular/core": "5.2.5",
    "@angular/flex-layout": "5.0.0-beta.13",
    "@angular/forms": "5.2.5",
    "@angular/http": "5.2.5",
    "@angular/material": "5.2.5",
    "@angular/platform-browser": "5.2.5",
    "@angular/platform-browser-dynamic": "5.2.5",
    "@angular/platform-server": "5.2.5",
    "@angular/router": "5.2.5",
    "@angular/upgrade": "5.2.5",
    "animate.css": "3.6.1",
    "bootstrap": "3.3.7",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.7",
    "glob": "7.1.2",
    "intl": "1.2.5",
    "jquery": "3.3.1",
    "rxjs": "5.5.6",
    "systemjs": "0.20.17",
    "typescript": "2.6.2",
    "web-animations-js": "2.3.1",
    "zone.js": "0.8.20"
  },
  "devDependencies": {
    "@ng-bootstrap/ng-bootstrap": "1.1.1",
    "@ng-idle/core": "2.0.0-beta.13",
    "@ng-idle/keepalive": "2.0.0-beta.13",
    "@swimlane/ngx-charts": "6.1.0",
    "@types/angular-idle": "1.1.31",
    "@types/core-js": "0.9.43",
    "@types/jquery": "3.3.11",
    "@types/metismenu": "2.7.1",
    "@types/node": "8.0.24",
    "@types/selenium-webdriver": "3.0.4",
    "angular-calendar": "0.23.7",
    "angular-draggable-droppable": "1.0.1",
    "angular-resizable-element": "1.2.1",
    "angular2-toaster": "4.0.0",
    "calendar-utils": "0.1.1",
    "css-loader": "0.28.5",
    "d3": "4.10.0",
    "date-fns": "1.29.0",
    "font-awesome": "4.7.0",
    "gulp": "3.9.1",
    "gulp-clean": "0.3.2",
    "gulp-typescript": "3.1.3",
    "gulp-util": "3.0.7",
    "hammerjs": "2.0.8",
    "jquery-slimscroll": "1.3.8",
    "less": "3.8.1",
    "less-loader": "4.0.5",
    "lodash": "4.16.4",
    "lodash._reinterpolate": "3.0.0",
    "lodash.template": "4.4.0",
    "lodash.templatesettings": "4.1.0",
    "metismenu": "2.7.4",
    "ngx-bootstrap": "2.0.3",
    "ngx-breadcrumbs": "0.0.3",
    "ngx-cookie": "2.0.1",
    "ngx-pagination": "3.0.3",
    "positioning": "1.3.0",
    "signature_pad": "2.3.2",
    "slimscroll": "0.9.1",
    "sweetalert2": "7.4.0",
    "ts-node": "2.0.0",
    "tslint": "4.5.0"
  }
}

Answer 1

我无法通过pl弹或堆叠闪电战来重现这一点。

我确实解决了这个问题。在main.ts中，我更改了

platformBrowserDynamic().bootstrapModule(AppModule)

到

window.onload = function () { platformBrowserDynamic().bootstrapModule(AppModule); }

似乎Safari在解压缩所有js文件之前就启动了angular应用程序。

Angular 5应用首次在Safari上加载不正确

1 个答案: