如何在 Internet Explorer 11 上运行 Angular 5 asp.net 核心 MVC

Question

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

你能告诉我如何实现吗？

Answer 1

如果您没有任何 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';

Answer 2

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

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

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

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

Answer 3

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

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

另请注意文章注释：

It is essential that you put these imports at the top of your boot file, above the imports for reflect-metadata or zone.js.

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

Answer 4

使用最新版本的 VS 2017 Angular 项目模板没有 pollyfills.ts 或 main.ts。但是，您可以将 IE 11 导入语句放在下面的文件 boot.browser.ts 中，该文件位于 ClientApp 文件夹中：

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

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

如何在 Internet Explorer 11 上运行 Angular 5 asp.net 核心 MVC

How to run Angular 5 asp.net core MVC on Internet Explorer 11

asp.net-core-2.0

angular

angular5

如何在 Internet Explorer 11 上 运行 Angular 5 asp.net 核心 MVC

How to run Angular 5 asp.net core MVC on Internet Explorer 11

asp.net-core-2.0

angular

angular5

如何在 Internet Explorer 11 上运行 Angular 5 asp.net 核心 MVC