Angular 8 混合应用程序无法识别 AngularJS 组件
Posted
技术标签:
【中文标题】Angular 8 混合应用程序无法识别 AngularJS 组件【英文标题】：Angular 8 hybrid app not recognizes AngularJS components 【发布时间】：2020-07-21 18:05:28 【问题描述】：我开始开发一个混合应用程序。所以我做了以下步骤：
添加 Angular 8 依赖项 添加polyfills.ts
从我的根 index.html 中删除 ng-app 属性
手动引导 AngularJs 应用程序
我的 Angular 初始化模块看起来如何：
@NgModule(
imports: [
BrowserModule,
UpgradeModule
]
)
export class HubAngularModule
ngDoBootstrap()
platformBrowserDynamic().bootstrapModule(HubAngularModule)
.then(platformRef =>
console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['myAngularJsModule']);
);
我的 index.html 看起来如何：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="dist/index.bundle.js"></script> <!--Webpack bundle-->
<link rel="stylesheet" href="dist/styles.css"/>
</head>
<body>
<div layout="column" layout-align="" ng-cloak>
<main-header></main-header> <!--AngularJS header component-->
<console-menu></console-menu> <!--AngularJS menu component-->
<md-content ui-view="main"></md-content> <!--AngularJS root ui-view-->
</div>
</body>
</html>
main-header、console-menu - 是 AngularJS 组件。当然，当出现ng-app 时，该配置效果很好。
我所期望的。混合应用启动就像旧的 AngularJS 应用一样，我可以看到登录页面、起始页面等。
我实际上得到了什么。 AngularJS 应用程序实际上是在引导。我可以看到方法 app.module().run(...) 执行。但是没有加载任何组件，所以我只看到一个空白页。
【问题讨论】：
【参考方案1】：您是否升级了 angularJS 组件以使其在 Angular 中工作？
【讨论】：
答案取决于“升级”是什么意思。我所有的组件都是组件。它们定义为 angular.module().component 并写在 Typescript 上。 如果你能提供一个stackblitz，我可以更好地帮助你，我上面提到的是你在angularJs组件中使用过升级组件吗？ ` 导出类 AngularJSComponent 扩展 UpgradeComponent @Input() twoWay: number; @Output() twoWayChange: EventEmitter经过几个小时的实验，我找到了灵魂。 我决定检查 AngularJS 的手动引导程序是否可以工作：
angular.element(document)
.ready(() =>
angular.bootstrap(document.body, ['myAngularJsModule']);
);
它失败了。即使没有 Angular 8 存在。所以它无法启动的原因是我的 webpack 包中的 <script> 标签的位置。它位于<head>，但应在所有应用标记之后位于<body>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div layout="column" layout-align="" ng-cloak>
<main-header></main-header> <!--AngularJS header component-->
<console-menu></console-menu> <!--AngularJS menu component-->
<md-content ui-view="main"></md-content> <!--AngularJS root ui-view-->
</div>
<script src="dist/index.bundle.js"></script> <!--Webpack bundle-->
<link rel="stylesheet" href="dist/styles.css"/>
</body>
</html>
它是如此愚蠢，但正是这种愚蠢的事情有时会让人头疼。最让我失望的是，没有一个迁移教程没有说明这个细节！
【讨论】：
天哪，谢谢你。人们认为读者知道的事情，我猜！现在混合动力终于开始工作了，我可以继续进行有趣的部分，升级所有东西：D以上是关于Angular 8 混合应用程序无法识别 AngularJS 组件的主要内容，如果未能解决你的问题，请参考以下文章
单元测试混合 Angular Js 和 Angular 8 应用程序
Angular 混合应用程序中降级组件中无法识别的驼峰式参数
Cordova：在 Angular 8 延迟加载实施后，应用程序无法启动，并且在初始屏幕显示白屏后
Angular 混合应用程序测试“无法读取 null 的属性‘nativeElement’”