Question

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

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

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

使用prod构建时，它不会在控制台中显示任何错误，并且不会加载angular应用。我在登录页面中加入了https://localhost:4200/xxx脚本，尝试了ng serve，它在控制台中显示以下错误...

注意：如果直接访问(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冲突。

compiler.js中的以下代码指的是从prototypeJS初始化的Array.from（我的旧版应用程序使用它）

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

要解决此问题，请保存Angular版本的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>

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

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

1 个答案: