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

Question

We have a legacy app that includes POJavascript, prototype, jquery.

We are rewriting the app in angular one part at a time. Currently we have rewritten some part with angular4. We are using webpack to bundle angular4 app, including angular bundles in application's landing page which worked well; webpack dev server is also working good.

Now, I am trying to upgrade to angular CLI and angular v6.2.1. So, I created a new project with CLI and then copied my angular4 source code into this new project, resolved all errors. CLI is spitting out all required scripts. I am including these scripts in my landing page.

With prod build it doesn't show any error in console and angular app doesn't load. I tried with ng serve, by including https://localhost:4200/xxx scripts in landing page, and it is showing below error in console...

NOTE : angular App works if directly accessed (https://localhost:4200) without any errors; but I need to access this through my legacy app's landing page, as lot of other things gets initialized and we need to release part by part. I think this is something related to zone, but can't figure out the exact issue.

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

Finally, I found the root cause of this issue - Array.from of PrototypeJS was conflicting with angular .

Following code from compiler.js of angular refers to Array.from that was being initialized from prototypeJS (my legacy app uses it)

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

To resolve this issue save angular version of Array.from and re-assign after prototype script loads...

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

It is working good; But I don't know if this is the best way and if there are any other conflicting scripts.