Angular 5 app not working in Microsoft Edge 40

2019-08-16 08:16发布

enter image description hereenter image description hereI have angular 5.2 application. its working fine in chrome,firefox. but in Microsoft Edge 40.15063 its not loaded fully. we are using angular material design with scss. i enabled all IE/Edge support in pollyfills. but whenever i use microsoft edge i throws lot of error in debugging panel.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'core-js/es7/array';


/**
 * Required to support Web Animations `@angular/animation`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation`enter code here`
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/*******************************************************************************
 * Zone JS is required by Angular itse`enter code here`lf.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

do you anyone faced this issue ? please help me to resolve.i attached screenshot.may be its edge issue or angular issue. i dont know how to find ? i put lot of efforts to identify the issue. but all the time i was failed. here with i attached package.json & tsconfig.json

package.json

{
  "name": "sample",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve -o",
    "build": "ng build --prod --aot",
    "test": "ng test --watch=false",
    "testserve": "ng test",
    "lint": "ng lint --type-check",
    "e2e": "ng e2e",
    "clearCache": "npm cache clean --force",
    "clearNodeModules": "rm -rf node_modules && npm run clearCache"
  },
  "private": true,
  "dependencies": {
    "@angular-mdl/core": "4.0.8",
    "@angular-mdl/popover": "0.10.0",
    "@angular-mdl/select": "0.13.0",
    "@angular/animations": "5.2.4",
    "@angular/cdk": "5.2.1",
    "@angular/common": "5.2.4",
    "@angular/compiler": "5.2.4",
    "@angular/compiler-cli": "5.2.4",
    "@angular/core": "5.2.4",
    "@angular/forms": "5.2.4",
    "@angular/http": "5.2.4",
    "@angular/material": "5.2.1",
    "@angular/platform-browser": "5.2.4",
    "@angular/platform-browser-dynamic": "5.2.4",
    "@angular/platform-server": "5.2.4",
    "@angular/router": "5.2.4",
    "@ngx-translate/core": "9.1.1",
    "@ngx-translate/http-loader": "2.0.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "2.5.3",
    "diacritics": "1.3.0",
    "intl": "^1.2.5",
    "jquery": "1.9.1",
    "json-merge": "1.2.0",
    "jspdf": "1.4.1",
    "lodash": "4.17.5",
    "material-design-lite": "1.3.0",
    "moment-es6": "1.0.0",
    "popper.js": "1.13.0",
    "rxjs": "5.5.6",
    "shelljs": "0.7.8",
    "web-animations-js": "2.3.1",
    "write-json": "2.0.0",
    "zone.js": "0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "1.7.0",
    "@angular/language-service": "5.2.4",
    "@types/jasmine": "2.5.53",
    "@types/jasminewd2": "2.0.2",
    "@types/jspdf": "1.1.31",
    "@types/node": "6.0.101",
    "codelyzer": "4.0.1",
    "jasmine-core": "2.6.2",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.4.1",
    "karma-jasmine": "1.1.1",
    "karma-jasmine-html-reporter": "0.2.2",
    "node-sass": "4.9.0",
    "protractor": "5.1.2",
    "ts-node": "3.0.4",
    "tslint": "5.3.2",
    "typescript": "2.6.2"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es6",
      "dom"
    ]
  }
}

1条回答
劫难
2楼-- · 2019-08-16 08:39

thanks guys who supported me. i like to answer my question.

i found the issue as 'Permission denied for accessing localstorage in Edge'. this may be happen in some workplaces for security reason.i solved the issue like below way

ininnerStorage = {};

public get(key: string): string {   

    try{
        return localStorage.getItem(key); 
    }
    catch(e){
        return this.innerStorage[key];
    }


}

public set(key: string, value: any): void {

    try{
        localStorage.setItem(key, value);
    }
    catch(e){
         this.innerStorage[key] = value
    }
}

public remove(key: string): void {  

    try{
        localStorage.removeItem(key);
    }
    catch(e){
         delete this.innerStorage[key]
    }

}

so i updated my code to use innerstorage if app not able to access localstorage

查看更多
登录 后发表回答