Angular 4 在 IE11 中不起作用答案

【问题标题】：Angular 4 not working in IE11Angular 4 在 IE11 中不起作用
【发布时间】：2018-10-19 11:33:22
【问题描述】：

我正在开发一个 angular 4 应用程序，当我用 chrome、firefox 或 ie edge 浏览器打开它时，它运行时没有问题，但是当我用 ie 11 打开它时，它会在浏览器的控制台中显示这个错误

SCRIPT1003: ':' 参加 common.chunk.js (922,22)

ERROR 错误：未捕获（承诺中）：错误：加载块常见失败的。错误：加载块公共失败。在匿名函数 (http://localhost:8091/vendor.bundle.js:219834:17) 在 CatchSubscriber.prototype.error (http://localhost:8091/vendor.bundle.js:136912:17) 在订阅者.prototype._error (http://localhost:8091/vendor.bundle.js:134986:9) 在订阅者.prototype.error (http://localhost:8091/vendor.bundle.js:134960:13) 在 OuterSubscriber.prototype.notifyError (http://localhost:8091/vendor.bundle.js:134456:9) 在 InnerSubscriber.prototype._error (http://localhost:8091/vendor.bundle.js:134005:9) 在订阅者.prototype.error (http://localhost:8091/vendor.bundle.js:134960:13) 在订阅者.prototype._error (http://localhost:8091/vendor.bundle.js:134986:9) 在订阅者.prototype.error (http://localhost:8091/vendor.bundle.js:134960:13) 在订阅者.prototype._error (http://localhost:8091/vendor.bundle.js:134986:9)

SCRIPT5022：SecurityError polyfills.bundle.js (5766,25)

polyfills.ts

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/es7/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

app.routes.ts

import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';

export const routes: Routes = [
  { path: '', redirectTo: 'convention', pathMatch: 'full' },
  { path: 'network', loadChildren: './module/network/network.module#NetworkModule' },
  { path: 'convention', loadChildren: './module/convention/convention.module#ConventionModule' },
  { path: '**', redirectTo: 'convention' }
];

export const appRoutes: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true, preloadingStrategy: PreloadAllModules });

app.module.ts

@NgModule({
  imports: [
    CommonModule,
    CoreModule.forRoot(),
    NgbModalModule.forRoot(),
    appRoutes,
    StoreModule.forRoot(fromRoot.reducers),
    EffectsModule.forRoot([]),
    StoreDevtoolsModule.instrument({ maxAge: 50 })
  ],
  declarations: [
    ...APP_COMPONENT
  ],
  providers: [
    { provide: LocationStrategy, useClass: PathLocationStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

index.html

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
  <base href="/">
</head>

<body>
  <app-root>
    <div class="loader loader-site">
      <div class="logo-beidys-loader"></div>
    </div>
  </app-root>
</body>

</html>

【问题讨论】：

你试过看看这个吗？ stackoverflow.com/questions/45353619/…
当你编译应用程序时，在 index.html 文件中的 html 标签内是否有<script type="text/javascript" src="polyfills.bundle.js"></script>？

标签： angular webpack angular-ui-router

【解决方案1】：

在 index.html 中添加元标记。这也是一条必经之路。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

请参考https://stackoverflow.com/a/6771584/7458082 了解更多信息。

【讨论】：