错误：没有错误处理程序。是否包含平台模块（BrowserModule）？尝试从 jsf 页面加载 Angular 应用程序时

Question

我们有一个包含 POJavascript、原型、jquery 的旧版应用程序。

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

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

使用 prod build 它不会在控制台中显示任何错误，并且不会加载 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 的以下代码指的是 Array.from，它是从prototypeJS 初始化的（我的旧应用程序使用它）

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>

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