错误：没有ErrorHandler。是否包含平台模块（BrowserModule）？当试图从jsf页面加载角度应用程序时

Question

我们有一个遗留应用程序，包括POJavascript，原型，jquery。

我们一次以角度重写应用程序。目前我们用angular4重写了一些部分。我们正在使用webpack捆绑angular4应用程序，包括应用程序登陆页面中的角度捆绑，效果很好; webpack dev服务器也运行良好。

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

使用prod构建它不会在控制台中显示任何错误，并且角度应用程序不会加载。我尝试使用ng服务，在登录页面中包含https://localhost:4200/xxx脚本，并在控制台中显示以下错误...

注意：如果直接访问(https://localhost:4200)没有任何错误，角度应用程序工作;但是我需要通过遗留应用程序的登录页面访问它，因为很多其他东西都被初始化了，我们需要逐个发布。我认为这与区域有关，但无法弄清楚确切的问题。

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.js of angular的代码是指从prototypeJS初始化的Array.from（我的遗留应用程序使用它）

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

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

<!-- 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>

它运作良好;但我不知道这是否是最好的方式，如果有任何其他冲突的脚本。