Ошибка: нет ErrorHandler.Включен ли модуль платформы (BrowserModule)?при попытке загрузить угловое приложение со страницы jsf

Question

У нас есть старое приложение, которое включает в себя POJavascript, prototype, jquery.

Мы переписываем приложение по углам по одной части за раз. В настоящее время мы переписали некоторую часть с angular4. Мы используем веб-пакет для связывания приложения angular4, включая угловые связки на целевой странице приложения, которые работали хорошо; Сервер webpack dev также работает хорошо.

Теперь я пытаюсь перейти на угловой CLI и угловой v6.2.1. Итак, я создал новый проект с CLI, а затем скопировал мой исходный код angular4 в этот новый проект, исправил все ошибки. CLI выплевывает все необходимые скрипты. Я включил эти сценарии в свою целевую страницу.

При использовании prod build в консоли не отображается никаких ошибок, а угловое приложение не загружается. Я попытался с помощью ng serve, включая 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

Наконец, я нашел основную причину этой проблемы - Array.from из PrototypeJS конфликтовал с угловым .

Следующий код из compiler.js angular ссылается на 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>

Работает хорошо; Но я не знаю, является ли это лучшим способом и есть ли другие конфликтующие сценарии.