asp.net - 如何修复 "Unable to get property ' apply' of undefined or null reference"错误与 asp.net 核心， Angular 4

Question

我正在使用 aspnetcore-spa 模板，使用命令“dotnet new angular”创建一个项目。参见 https://jonhilton.net/2017/02/21/create-a-vs2017-angular-2-and-net-core-site-using-the-command-line/ .当前的模板集是 1.0.3 版，它将 Angular 4.1.2 添加到 npm 依赖项中。这对于让项目快速运行非常有用。

但是，开箱即用的“计数器”页面不适用于 IE 11。如果您导航到“计数器”链接，并查看 IE 的控制台，您将看到消息:“无法获取属性'应用'未定义或空引用”。当您单击“增量”按钮时，什么也没有发生。 (它适用于 Chrome 和 Firefox，但不适用于 IE。)

我做了一些挖掘，问题的根源似乎是 .assign 方法没有在 IE11 中实现。参见 Angular2 IE11 Unable to get property 'apply' of undefined or null reference

根据上面的链接，修复是通过 MDN 导入 Object.assign polyfill。但是，我不知道如何在项目中完成它。我尝试过的是:

1) 添加到 package.json: "mdn-polyfills": "^3.5.0"

2) 添加 ''mdn-polyfills' 到 webpack.config.vendors.js

3) 从项目文件夹根目录的命令提示符运行“webpack --config webpack.config.vendor.js”，这会导致错误:

Module not found: Error: Can't resolve 'mdn-polyfills'

我不知道接下来要做什么。上面的步骤 1 和 2 不能解决问题。我尝试向 app.module.shared.ts 添加以下内容:

import 'mdn-polyfills/Object.assign';

这个编译很好，但没有任何帮助。当然，无论如何我都不打算使用计数器页面，但是我在我真正关心的组件中创建的表单上遇到了同样的错误(仅在 IE 11 中)。

因此，再一次，我不得不为如何设置一个有效的环境而苦恼，而不是实际编码 Angular 组件。哦，我多么怀念那些我可以通过 NuGet 添加包并且它会正常工作的日子!

如果有人能提供帮助，我们将不胜感激。

更新:找到这个之后:https://www.npmjs.com/package/es6-object-assign ，我将“es6-object-assign”:“1.1.0”添加到package.json，然后将'es6-object-assign'添加到webpack.config.vendors.js，然后运行webpack --config webpack.config.vendor .js”(没有错误)。然后我在 app.component.ts 文件的顶部添加了以下内容:

import 'es6-shim';
import 'es6-promise';
import 'event-source-polyfill';
import 'es6-object-assign';

这些都没有任何区别。我仍然收到“无法获取未定义或空引用的‘应用’属性”错误。我还注意到此错误出现在每个页面上，尽管它似乎只影响计数器页面的功能(增量按钮不执行任何操作)。

我已经确认问题的根源确实是 .assign 方法。错误来自 vendor.js 文件，在下面的返回行:

function combine(options) {
    return ((Object)).assign.apply(((Object)), [{}].concat(options));
}

一定有办法解决这个问题，但我不知所措......

新更新:我确信这不是解决此问题的正确方法，但无奈之下我只是在我的 _Layout.cshtml 页面顶部添加了一个脚本，我在此处找到: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

这确实解决了问题，并使计数器页面正常工作，但它显然不是“Angular 方式”，所以我不认为这个解决方案是我问题的答案。如果有人能告诉我解决这个问题的正确方法，我会认为这是答案。

Answer 1

为了解决函数中vendor.js的问题

function combine(options) {
    return ((Object)).assign.apply(((Object)), [{}].concat(options));
}

一种解决方案是使用 polyfills.ts，如 here 所述

但在很多情况下没有polyfills.ts 文件...所以在这种情况下，对我有用的解决方案是...

在解决方案的 ClientApp 目录下有一个名为

的文件

boot.browser.ts

在第 2 行下

import 'zone.js';

添加这个

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

/***********added*************/

这应该有效。