Angular 4应用程序无法在Microsoft Edge和ie11中进行首次加载

Question

我一直在研究angular 4应用程序。 它在Mozilla和chrome上可以正常工作，但是当我们在Microsoft Edge浏览器上访问它时，在第一次加载时，它无法正常工作，并且控制台中没有错误。 但是，当我刷新页面时，它可以正常工作。 我不明白这个问题。 如果有人知道这一点，请告诉我。

我在应用程序中使用了以下依赖项：

"dependencies": {
    "@agm/core": "1.0.0-beta.0",
    "@angular/animations": "^4.3.2",
    "@angular/common": "^4.2.2",
    "@angular/compiler": "^4.2.2",
    "@angular/core": "^4.2.2",
    "@angular/flex-layout": "2.0.0-beta.8",
    "@angular/forms": "^4.2.2",
    "@angular/http": "^4.2.2",
    "@angular/material": "2.0.0-beta.7",
    "@angular/platform-browser": "^4.2.2",
    "@angular/platform-browser-dynamic": "^4.2.2",
    "@angular/router": "^4.2.2",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
    "@swimlane/ngx-charts": "^6.0.0",
    "@swimlane/ngx-datatable": "9.3.0",
    "angular-calendar": "0.19.0",
    "angular-resizable-element": "^1.2.0",
    "angular-sortablejs": "^2.0.6",
    "angular-tree-component": "3.8.0",
    "chart.js": "2.6.0",
    "ckeditor": "4.6.0",
    "core-js": "2.4.1",
    "d3": "^4.9.1",
    "dragula": "3.7.2",
    "easy-pie-chart": "2.1.7",
    "font-awesome": "4.7.0",
    "hammerjs": "2.0.8",
    "intl": "1.2.4",
    "jquery": "2.2.4",
    "jqvmap": "^1.5.1",
    "leaflet": "^1.0.2",
    "leaflet-map": "0.2.1",
    "moment": "^2.15.0",
    "ng-sidebar": "^6.0.0",
    "ng2-ace-editor": "^0.2.3",
    "ng2-archwizard": "^1.7.0",
    "ng2-breadcrumb": "0.5.14",
    "ng2-charts": "1.6.0",
    "ng2-ckeditor": "1.1.9",
    "ng2-dnd": "^4.2.0",
    "ng2-drag-drop": "^2.5.0",
    "ng2-dragula": "1.5.0",
    "ng2-file-upload": "1.2.1",
    "ng2-google-charts": "^3.0.1",
    "ng2-nouislider": "^1.6.1",
    "ng2-translate": "5.0.0",
    "ng2-tree": "^2.0.0-alpha.10",
    "ng2-validation": "4.2.0",
    "ng2modules-easypiechart": "^0.0.4",
    "ngx-mydatepicker": "2.0.12",
    "ngx-perfect-scrollbar": "^2.0.1",
    "ngx-quill": "^1.3.1",
    "ngx-toastr": "^5.3.0",
    "ngx-tour-ng-bootstrap": "^1.0.6",
    "normalize.css": "^5.0.0",
    "nouislider": "^10.0.0",
    "nvd3": "^1.8.5",
    "perfect-scrollbar": "^0.6.16",
    "popper.js": "^1.12.3",
    "quill": "^1.2.3",
    "rxjs": "5.4.2",
    "screenfull": "^3.2.2",
    "simple-line-icons": "^2.4.1",
    "skycons": "^1.0.0",
    "sortablejs": "^1.6.0",
    "summernote": "^0.8.4",
    "ts-helpers": "^1.1.2",
    "widgster": "0.0.3",
    "zone.js": "^0.8.16"
}

并且我具有以下开发依赖性：

"devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.2",
    "@types/d3": "^3.5.17",
    "@types/jasmine": "2.5.52",
    "@types/jquery ": "3.2.0",
    "@types/node": "7.0.8",
    "@types/nvd3": "^1.8.33",
    "codelyzer": "3.0.1",
    "jasmine-core": "2.6.3",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "5.1.2",
    "ts-node": "3.0.6",
    "tslint": "5.4.3",
    "typescript": "2.3.4"
}

Answer 1

检查您的tsConfigfile，它应该如下所示。

{
"compilerOptions": {
"target": "es5",
 "module": "commonjs",
 "moduleResolution": "node",
 "sourceMap": true,
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "removeComments": false,
  "noImplicitAny": true,
  "types": [],
  "lib": [ "es2015", "es2017", "dom" ]
  },
  "exclude": [
 "node_modules"
],
"compileOnSave": true
}

我很久以前就遇到了这个问题，但是当我在tsconfig中添加备用库时，它对我有用。 所以我也可以帮你