如何在 Internet Explorer 11 上运行 Angular 5 asp.net core MVC答案

【问题标题】：How to run Angular 5 asp.net core MVC on Internet Explorer 11如何在 Internet Explorer 11 上运行 Angular 5 asp.net core MVC
【发布时间】：2018-01-17 04:16:22
【问题描述】：

我在 ASP.NET core 2 下的 VS 2017 上创建了一个基本的 Angular 应用程序，并将其升级到 Angular 5。它应该在 IE 11 上运行，但我注意到它在 IE11 上无法正常运行；它适用于 Chrome。当我阅读时，我看到我们应该在 polyfill.ts 上做点什么，但是使用 ASP.NET 核心我看不到任何 polyfill 文件。

您能告诉我如何实现这一目标吗？

【问题讨论】：

嗨chanuri！您是否使用 angular-cli 生成了 Angular 项目？
如果你使用 angular-cli 创建项目，那么只有你可以拥有 polyfill.ts。
“无法正常工作”是什么意思？
嗨@Sajeetharan 和 Aarsh。谢谢你的指导。我通过使用 angular cli 创建一个 angular 项目解决了这个问题。并使用 VS2017 打开它，它为我创建了一个 polyfill。

标签： angular asp.net-core-2.0 angular5

【解决方案1】：

使用最新版本的 VS 2017 Angular 项目模板，没有 pollyfills.ts 或 main.ts。但是，您可以将下面的 IE 11 导入语句放在位于 ClientApp 文件夹中的文件 boot.browser.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/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';

确保将其放在页面的最顶部。还要确保重建项目以获取库。

【讨论】：

【解决方案2】：

如果您没有任何 polyfills.ts 文件，您可以直接将 polyfills 包含到 main.ts 文件中，然后您可以在 IE 11 中运行应用程序。下面提到的 polyfills 需要从 npm 安装并导入您的应用程序。

/** 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';


/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
import 'intl';  // Run `npm install --save intl`.
/**
 * Need to import at least one locale-data with intl.
 */
import 'intl/locale-data/jsonp/en';

【讨论】：

【解决方案3】：

使用 Angular CLI dotnet new angular 命令与在 Visual Studio 中创建 .Net Core 2 应用程序（使用 JavaScriptServices）的项目格式非常不同。例如，当使用 Angular CLI 时，它包含诸如 .angular-cli.json 和 polyfills.ts 之类的文件，而 Visual Studio 版本有一个 webpack.config.js。

请参阅以下链接，了解如何在从 Visual Studio 中生成时添加 IE11 支持。基本上，您将 polyfill 放在 boot.browser.ts 文件的顶部。我这样做的方法是在 ClientApp 中放置一个 polyfills.ts 文件，然后在 boot.browser.ts 文件中放置一个“import './polyfills';”在顶部。

还要注意文章注释：

您必须将这些导入放在引导文件的顶部，在反射元数据或 zone.js 的导入上方。

https://github.com/aspnet/JavaScriptServices/wiki/Supporting-Internet-Explorer-11-(or-older)

【讨论】：

【解决方案4】：

手动添加 polyfill 在运行时会产生一些错误。最后，我能够通过使用 Angular CLI 创建一个点网核心项目来解决这个问题。这些是步骤。

以管理模式打开 PowerShell
mkdir {projectname} 到（创建一个项目文件夹} 并转到文件夹内
dotnet new -l 查看相关模板。你应该看到角度模板核心2.0
dotnet new angular - 这将使用创建的文件夹名称创建一个项目
dotnet 恢复
npm 安装
开始{项目名称}

然后您将使用 .net 打开项目并保存解决方案文件。重建解决方案。现在您可以看到 polyfill.ts 并取消注释 IE 所需的导入。

参考https://channel9.msdn.com/Events/Visual-Studio/Visual-Studio-2017-Launch/WEB-103

【讨论】：