downgradeModule 不会在混合应用程序中启动 Angular5 部分答案

【问题标题】：downgradeModule doesn't start Angular5 part in hybrid appdowngradeModule 不会在混合应用程序中启动 Angular5 部分
【发布时间】：2017-11-08 16:23:49
【问题描述】：

Angular5 引入了一种将应用程序从 AngularJS 升级到 Angular 的新方法 - downgradeModule。它应该解决在这种混合应用程序中急切更改检测的问题。到目前为止，在 Angular4 中我成功地使用了UpgradeModule，但是由于检测到变化而导致了一些性能问题。现在我正在尝试使用downgradeModule。在这种方法中，首先启动 AngularJS，下一个 downgradeModule 启动 Angular。这样 AngularJS 在 AngularZone 之外运行，应该冷静下来检测什么。

main.ts 在.angular-cli.json 中被指向为“main”

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import {enableProdMode, StaticProvider} from '@angular/core';
import { downgradeModule } from '@angular/upgrade/static';

enableProdMode();
declare var angular: any;

const bootstrapFn = (extraProviders: StaticProvider[]) => {
    const platformRef = platformBrowserDynamic(extraProviders);
    return platformRef.bootstrapModule(AppModule);
};
const myDowngradedModule = downgradeModule(bootstrapFn);

angular.bootstrap(document.documentElement, [
    'legacyApp',
    myDowngradedModule
]);

现在，AngularJS 开始很好，但 Angular没有。控制台没有错误，没有提示。只是主选择器，例如。 <my-app> 未评估。 app.module.ts 在以前的工作版本中没有任何变化。

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    UpgradeModule,
    RouterModule.forRoot([], { initialNavigation: false })
  ],
providers: [{provide: APP_BASE_HREF, useValue : '/shop/' }],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]    
})
export class AppModule {
  ngDoBootstrap() {}
}

我使用了一些 Angular 文档草稿，因为主要文档没有提及 downgradeModule。 https://pr18487-aedf0aa.ngbuilds.io/guide/upgrade-performance

有人知道为什么 Angular5 部分没有启动吗？

仅供参考，main.ts 和 UpgradeModule 的先前外观效果很好，但更改检测。

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
   const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
   upgrade.bootstrap(document.documentElement, ['legacyApp']);
   platformRef.injector.get(Router).initialNavigation();
});

【问题讨论】：

标签： angularjs angular angular-upgrade angular5

【解决方案1】：

LancerX，你有没有尝试将 AppComponent 添加到 AppModule 中的 entryComponents 中？

@NgModule({
    imports: [
        CommonModule,
        BrowserModule,
        UpgradeModule,
        RouterModule.forRoot([], { initialNavigation: false })
    ],
    providers: [{provide: APP_BASE_HREF, useValue : '/shop/' }],
    declarations: [ AppComponent ],
    entryComponents: [ AppComponent ],
    bootstrap: [ AppComponent ]    
})

export class AppModule {
    ngDoBootstrap() {}
}

【讨论】：

我之前没有尝试过，但现在我尝试了，没有任何改变。我看到了您的帖子“结合使用 downgradeModule ...”并尝试做同样的事情（除了我不知道的 decorateModuleRef ）并在main.ts 中将angular.bootstrap(document.documentElement [].... 替换为var legacyApp = angular.module('legacyApp', [ downgradedModule, ....。现在我有错误Module 'legacyApp' is not available!
LancerX，我在 html 文件中使用 angular 1.x 的声明性引导程序...

【解决方案2】：

这可能是因为 AoT 编译。我们有一个类似的问题，并通过停用 aot 来解决它。

另见https://pr18487-aedf0aa.ngbuilds.io/guide/upgrade-performance#using-ahead-of-time-compilation-with-hybrid-apps

【讨论】：

【解决方案3】：

我也遇到了同样的问题，这是因为我用一个坏名注册了降级的组件。我是这样注册的：

angular.module("myModule").directive("my-component", downgradeComponent({ component: MyComponent}));

但应该是这样的：

angular.module("myModule").directive("myComponent", downgradeComponent({ component: MyComponent}));

因此组件从未初始化，因为名称错误。并且因为降级的模块是延迟加载的（在加载其中一个组件之前不会加载），因此该模块也从未被初始化。修复指令名称解决了问题。

【讨论】：