如何修复"无法获取属性'应用'未定义或空引用"错误与asp.net core,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.)

我做了一些挖掘,似乎问题的根源是IE11中没有实现.assign方法.请参阅Angular2 IE11无法获取未定义或空引用的属性"apply"

根据上面的链接,修复是通过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 /文档/网络/的JavaScript /参考/ Global_Objects /对象/分配

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

Answer 1

为了解决vendor.js功能上的问题

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

一种解决方案就是polyfills.ts按照这里的说法进行操作

但在许多情况下没有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*************/

这应该工作.