时间戳

首页 > 解决方案 > Angular 8 混合应用程序无法识别 AngularJS 组件

angularjs - Angular 8 混合应用程序无法识别 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(...) 执行。但是没有加载任何组件，所以我只看到一个空白页。

标签： angularjsangularangular-upgradeangular-hybrid

解决方案

经过几个小时的实验，我找到了灵魂。我决定检查 AngularJS 的手动引导程序是否可以工作：

angular.element(document)
    .ready(() => {
        angular.bootstrap(document.body, ['myAngularJsModule']);
    });

它失败了。即使没有 Angular 8 存在。所以它无法启动的原因是<script>我的 webpack 包的标签位置。它位于<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>

它是如此愚蠢，但正是这种愚蠢的事情有时会让人头疼。最让我失望的是，没有一个迁移教程没有说明这个细节！

推荐阅读