angularjs - 角度迁移 - 混合应用程序不引导
问题描述
我正在通过 ngUpgrade 路由将我的 Angularjs 1.6 应用程序迁移到 Angular 7,毕竟当我尝试引导我的混合应用程序时,它无法引导,我注意到我的 main.ts 文件根本没有执行因为我已将它添加为我的 webpack 配置中的入口点。
我在我的 HtmlWebpackPlugin 中使用 template.ejs 文件作为模板。对于 Webpack 设置和 package.json,请在此处查看我在 github 上的应用程序捆绑和引导代码: https ://github.com/mmmathur/AngularMigration
我也尝试将其重命名为 index.ts 但仍然没有运气。
主要的.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)
知道这里出了什么问题吗?
解决方案
如果你从 AngularJS 迁移<script>
,你的 bundle 的标签可能在head
段内。将其移至末尾body
<html>
<head>
</head>
<body>
... ...
<script src="dist/main.js" charset="utf-8"></script>
</body>
</html>
推荐阅读
- java - 如何按顺序显示输入的分数?
- pine-script - 如何定义过去 14 根蜡烛的范围?
- typescript - 如何在 Typescript 中循环引用 keyof?
- c# - 从 Windows 开始菜单打开 WPF 应用程序时崩溃
- javascript - 文件树归约器中的状态未定义
- pytorch - 如何在训练我的神经网络时加快加载数据的过程?
- java - 如何在java中读取文件以进行处理
- java - 如何修复我的文件编写器创建文件但将其留空?
- django - Django Filter - 如何为过滤器的任何组合调用单个方法?
- excel - 如何在Excel中的二维数组中查找和提取值的位置