I have been working on an angular 4 app. It is working fine on Mozilla and chrome but when we access it on the Microsoft edge browser, on the first load, it is not working and there is no error in the console. But when I refresh the page then it works fine. I don't understand the problem. If anybody knows about this please let me know.
I have used the following dependencies in my app:
"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"
}
and I have the following dev-dependencies:
"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"
}
Check your tsConfigfile it should be like below..
{
"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
}
i faced this issue long back but it worked for me when i added alternate lib in tsconfig. so i might help you also
来源：https://stackoverflow.com/questions/46231999/angular-4-app-is-not-working-on-first-load-in-microsoft-edge-and-ie11