javascript - 错误: No ErrorHandler. 是否包含平台模块(BrowserModule)？尝试从 jsf 页面加载 Angular 应用程序时

Question

我们有一个遗留应用程序，其中包括 POJavascript、原型(prototype)和 jquery。

我们正在以 Angular 一次一个部分地重写应用程序。目前我们已经用angular4重写了一些部分。我们正在使用 webpack 来捆绑 angular4 应用程序，包括应用程序登陆页面中的 Angular bundle ，效果很好； webpack 开发服务器也运行良好。

现在，我正在尝试升级到 Angular CLI 和 Angular v6.2.1。所以，我用 CLI 创建了一个新项目，然后将我的 angular4 源代码复制到这个新项目中，解决了所有错误。 CLI 正在吐出所有必需的脚本。我将这些脚本包含在我的登陆页面中。

对于产品构建，它不会在控制台中显示任何错误，并且不会加载 Angular 应用程序。我尝试使用 ng serve，在着陆页中包含 https://localhost:4200/xxx 脚本，它在控制台中显示以下错误...

注意:如果直接访问 (https://localhost:4200) 没有任何错误，angular App 可以正常工作；但我需要通过我的遗留应用程序的登录页面访问它，因为很多其他的东西都被初始化了，我们需要一部分一部分地发布。我认为这与区域有关，但无法找出确切的问题。

Error: No ErrorHandler. Is platform module (BrowserModule) included?
Stack trace:
["./node_modules/@angular/core/fesm5/core.js"]/PlatformRef.prototype.bootstrapModuleFactory/<@https://localhost:4200/vendor.js:43138:23 [angular]
forkInnerZoneWithAngularBehavior/zone._inner<.onInvoke@https://localhost:4200/vendor.js:42646:24 [angular]
["./node_modules/@angular/core/fesm5/core.js"]/NgZone.prototype.run@https://localhost:4200/vendor.js:42560:16 [<root>]
["./node_modules/@angular/core/fesm5/core.js"]/PlatformRef.prototype.bootstrapModuleFactory@https://localhost:4200/vendor.js:43133:16 [<root>]
["./node_modules/@angular/core/fesm5/core.js"]/PlatformRef.prototype.bootstrapModule/<@https://localhost:4200/vendor.js:43175:53 [<root>]
scheduleResolveOrReject/<@https://localhost:4200/polyfills.js:3194:29 [<root>]
drainMicroTaskQueue@https://localhost:4200/polyfills.js:2917:25 [<root>]
["./node_modules/zone.js/dist/zone.js"]/</ZoneTask.invokeTask@https://localhost:4200/polyfills.js:2822:21 [<root>]
patchEventTarget/invokeTask@https://localhost:4200/polyfills.js:3862:9 [<root>]
patchEventTarget/globalZoneAwareCallback@https://localhost:4200/polyfills.js:3888:17 [<root>]

Answer 1

最后，我找到了这个问题的根本原因——PrototypeJS 的 Array.from 与 angular 冲突。

来自 Angular 的 compiler.js 的以下代码引用了从 prototypeJS 初始化的 Array.from(我的遗留应用程序使用它)

function dedupeArray(array) {
    if (array) {
        return Array.from(new Set(array));
    }
    return [];
}

要解决此问题，请保存 Array.from 的 Angular 版本并在原型(prototype)脚本加载后重新分配...

<!-- 1. include Angular lib scripts -->
<script type="text/javascript" src="https://localhost:4200/runtime.js"></script>
<script type="text/javascript" src="https://localhost:4200/polyfills.js"></script>
<script type="text/javascript" src="https://localhost:4200/styles.js"></script>
<script type="text/javascript" src="https://localhost:4200/vendor.js"></script>
<!-- 2. save angular version of Array.from -->
<script> var ngArrayFrom = Array.from; </script>
<!-- 3. include Prototype script -->
<script type="text/javascript" src="/prototype.js"></script>
<!-- 4. re-assign Array.from -->
<script> Array.from = ngArrayFrom; </script>
<!-- 5. include angular app script -->
<script type="text/javascript" src="https://localhost:4200/main.js"></script>

它运行良好；但我不知道这是不是最好的方式，是否还有其他冲突的脚本。