Angular 8 个混合应用无法识别 AngularJS 组件

Question

我开始开发混合应用程序。所以我完成了以下步骤：

添加Angular 8个依赖项
添加polyfills.ts
从我的根中删除 ng-app 属性 index.html
为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 时，该配置效果很好。

如我所料。 Hybrid 应用程序像旧的 AngularJS 应用程序一样启动，我能够看到登录页面、起始页面等。

我实际得到了什么。 AngularJS 应用实际上是 bootstrapping。我可以看到方法 app.module().运行(...) 执行。但是没有加载任何组件，所以我只看到一个空白页面。

Answer 1

您是否升级了 angularJS 组件以使其在 Angular 中工作？

Answer 2

经过几个小时的实验，我找到了解决方案。我决定检查 AngularJS 的手册 bootstrap 是否有效：

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>

实在是太蠢了，但就是这种蠢事有时候最让人头疼。最让我失望的是，没有一个迁移教程对这个细节只字未提！

Angular 8 个混合应用无法识别 AngularJS 组件

Angular 8 hybrid app not recognizes AngularJS components

angularjs

angular-upgrade

angular

angular-hybrid