【问题标题】:Angular 5 app not working in Microsoft Edge 40Angular 5 应用无法在 Microsoft Edge 40 中运行
【发布时间】:2018-09-10 11:11:40
【问题描述】:

我有 Angular 5.2 应用程序。它在 chrome、firefox 中运行良好。但在 Microsoft Edge 40.15063 中,它没有完全加载。我们正在使用带有 scss 的角材料设计。我在 pollyfills 中启用了所有 IE/Edge 支持。但是每当我使用 microsoft edge 时,我都会在调试面板中抛出很多错误。

/** 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.

你们有人遇到过这个问题吗?请帮我解决。我附上了截图。可能是它的边缘问题或角度问题。我不知道如何找到?我付出了很多努力来确定这个问题。但我一直都失败了。在这里我附上了 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"
    ]
  }
}

【问题讨论】:

  • 您在 edge 中看到了哪些错误日志?编辑您的问题并将其放在那里。
  • 它会引发很多错误。现在我附上图片
  • 您有更新的浏览器吗?尝试清除缓存并卸载扩展。您可以尝试在另一个 Windows 配置文件中打开它吗?
  • @karoluS。我没有安装任何扩展。以及如何在另一个窗口配置文件中打开?
  • 在边缘错误日志中,我看到一些关于您的浏览器扩展的错误。禁用或删除扩展,然后重试。我还看到另一个不清楚的错误,展开它:ERROR CONTEXT [object Object]

标签: javascript angular internet-explorer angular-material microsoft-edge


【解决方案1】:

感谢支持我的人。我喜欢回答我的问题。

我发现问题为“访问 Edge 中的本地存储的权限被拒绝”。出于安全原因,这可能会在某些工作场所发生。我以如下方式解决了这个问题

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]
    }

}

所以如果应用程序无法访问本地存储,我更新了我的代码以使用内部存储

【讨论】:

  • 您能否提供您发现的问题的链接?我也有同样的问题,想找个原因。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-02-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-02-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多