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

时间：2019-08-15 14:18:42

标签： angularjs angular typescript webpack-4

我正在通过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 {}

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

实际：空白屏幕，未引发任何错误。

更新问题是这些行：

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

优化是导致此问题的原因，一旦我从webpack中删除了上面的config选项，应用程序至少会启动引导程序，尽管这一次我遇到了以下错误：

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应用程序也沿侧角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)

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

1 个答案:

答案 0 :(得分：0)

如果您要从AngularJS进行迁移，则捆绑软件的<script>标签可能位于head段中。将其移至body

的 end 
<html>

<head>
</head>

<body>
  ... ...

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

</html>
相关问题
最新问题