角度迁移 - 混合应用程序不引导

Question

我正在通过 ngUpgrade 路由将我的 Angularjs 1.6 应用程序迁移到 Angular 7，毕竟当我尝试引导我的混合应用程序时，它无法引导，我注意到我的 main.ts 文件没有执行在我将它作为入口点添加到我的 webpack 配置中的所有地方。

我在我的 HtmlWebpackPlugin 中使用 template.ejs 文件作为模板。对于 Webpack 设置和 package.json，请在此处查看我在 github 上的应用程序捆绑和引导代码： https://github.com/mmmathur/AngularMigration

我也尝试将其重命名为 index.ts，但仍然没有运气。

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from '../client/ngApp/ngApp.module';

const app = require('../client/app');
let appRoot = document.createElement('div');
const uiView = document.createElement('ui-view');
let body = document.querySelector('body');

appRoot.appendChild(uiView);
body.appendChild(appRoot);

console.log('executing main.ts');//even this statement is not executed
platformBrowserDynamic().bootstrapModule(AppModule).then((platformRef) => {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.documentElement, [app]);
  console.log('hybrid application is bootstrapped');

})
.catch(err => console.error(err))

ngAppModule.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import { FormsModule} from '@angular/forms';
import {UpgradeModule} from '@angular/upgrade/static';
import { AppComponent } from './ngApp.component';



@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    UpgradeModule

  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ],
  entryComponents: [

  ]
})

export class AppModule {}

ngApp.component.ts

import { Component } from "@angular/core";

@Component({
  selector: 'ng-app',
  template: `
  <div>
    <h2>Angular 7 application bootstraped</h2>
  </div>
  `
})
export class AppComponent {}

预期：我的混合应用程序被引导。

实际：没有错误抛出的空白屏幕。

更新问题是这些行：

optimization: 
  {
    splitChunks: {
      chunks: 'all'
    }
  }

优化导致了这个问题，一旦我从 webpack 中删除了上面的配置选项，应用程序至少开始引导，虽然这次我收到了如下错误：

Uncaught Error: Can't resolve all parameters for ApplicationModule: (?).
    at syntaxError (compiler.js:2547)
    at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:17874)
    at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:17767)
    at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:17635)
    at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:17445)
    at compiler.js:17559
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:17547)
    at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:17445)
    at compiler.js:17532

我尝试通过在我的项目中添加 polyfills.ts 文件来解决此问题

Polyfills.ts

import 'core-js/es7/reflect';
import 'core-js/client/shim';
import 'zone.js/dist/zone.js';

但仍然出现同样的错误，我使用的是 core-js 3.2.1。 看看是否有人知道我的代码出了什么问题？

更新我了解到我应该在 HtmlWebpackPlugin-->chunks 数组中添加 polyfills.ts 文件，添加后，它开始选择 polyfills 文件，现在错误已经消失，现在我的 angularjs应用程序也沿着 Angular 7 应用程序进行引导，但是现在我遇到了另一个错误，例如：

Error: [$injector:modulerr] Failed to instantiate module $$UpgradeModule due to:
Error: [$injector:modulerr] Failed to instantiate module {"default":"ui.app"} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object


https://errors.angularjs.org/1.6.10/$injector/modulerr?p0=%24%24UpgradeModule&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20%7B%22default%22%3A%22ec.customer.servicing.ui.app%22%7D%20due%20to%3A%0AError%3A%20%5Bng%3Aareq%5D%20Argument%20'module'%20is%20not%20a%20function%2C%20got%20Object%0A%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.6.10%2F%24injector%2Fmodulerr%3Fp0%3D%257B%2522default%2522%253A%2522ec.customer.servicing.ui.app%2522%257D%26p1%3DError%253A%2520%255Bng%253Aareq%255D%2520Argument%2520'module'%2520is%2520not%2520a%2520function%252C%2520got%2520Object%250Ahttps%253A%252F%252Ferrors.angularjs.org%252F1.6.10%252Fng%252Fareq%253Fp0%253Dmodule%2526p1%253Dnot%252520a%252520function%25252C%252520got%252520Object%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8080%252Fng1.bundle.js%253F29bb21d813a74a626d53%253A32020%253A12%250A%2520%2520%2520%2520at%2520assertArg%2520(http%253A%252F%252Flocalhost%253A8080%252Fng1.bundle.js%253F29bb21d813a74a626d53%253A33994%253A11)%250A%2520%2520%2520%2520at%2520assertArgFn%2520(http%253A%252F%252Flocalhost%253A8080%252Fng1.bundle.js%253F29bb21d813a74a626d53%253A34004%253A3)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8080%252Fng1.bundle.js%253F29bb21d813a74a626d53%253A36915%253A11%250A%2520%2520%2520%2520at%2520forEach%2520(http%253A%252F%252Flocalhost%253A8080%252Fng1.bundle.js%253F29bb21d813a74a626d53%253A32313%253A20)%250A%2520%2520%2520%2520at%2520loadModules%2520(http%253A%252F%252Flocalhost%253A8080%252Fng1.bundle.js%253F29bb21d813a74a626d53%253A36889%253A5)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8080%252Fng1.bundle.js%253F29bb21d813a74a626d53%253A36907%253A40%250A%2520%2520%2520%2520at%2520forEach%2520(http%253A%252F%252Flocalhost%253A8080%252Fng1.bundle.js%253F29bb21d813a74a626d53%253A32313%253A20)%250A%2520%2520%2520%2520at%2520loadModules%2520(http%253A%252F%252Flocalhost%253A8080%252Fng1.bundle.js%253F29bb21d813a74a626d53%253A36889%253A5)%250A%2520%2520%2520%2520at%2520createInjector%2520(http%253A%252F%252Flocalhost%253A8080%252Fng1.bundle.js%253F29bb21d813a74a626d53%253A36806%253A19)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fng1.bundle.js%3F29bb21d813a74a626d53%3A32020%3A12%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fng1.bundle.js%3F29bb21d813a74a626d53%3A36929%3A15%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8080%2Fng1.bundle.js%3F29bb21d813a74a626d53%3A32313%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8080%2Fng1.bundle.js%3F29bb21d813a74a626d53%3A36889%3A5)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fng1.bundle.js%3F29bb21d813a74a626d53%3A36907%3A40%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A8080%2Fng1.bundle.js%3F29bb21d813a74a626d53%3A32313%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A8080%2Fng1.bundle.js%3F29bb21d813a74a626d53%3A36889%3A5)%0A%20%20%20%20at%20createInjector%20(http%3A%2F%2Flocalhost%3A8080%2Fng1.bundle.js%3F29bb21d813a74a626d53%3A36806%3A19)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A8080%2Fng1.bundle.js%3F29bb21d813a74a626d53%3A33860%3A20)%0A%20%20%20%20at%20Object.bootstrap%20(http%3A%2F%2Flocalhost%3A8080%2Fng1.bundle.js%3F29bb21d813a74a626d53%3A33881%3A12)
    at angular.js:125
    at angular.js:5034
    at forEach (angular.js:418)
    at loadModules (angular.js:4994)
    at createInjector (angular.js:4911)
    at doBootstrap (angular.js:1965)
    at Object.bootstrap (angular.js:1986)
    at bootstrap (static.js:76)
    at static.js:1595
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)

知道这里出了什么问题吗？

Answer 1

如果您从 AngularJS 迁移，您的包的 <script> 标签可能在 head 段内。将其移至body

的末尾

<html>

<head>
</head>

<body>
  ... ...

  <script src="dist/main.js" charset="utf-8"></script>
</body>

</html>