Question

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

main.ts在.angular-cli.json中指向＆＃34; main＆＃34;

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 doc草案，因为主要人员对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();
});

Answer 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() {}
}

Answer 2

可能是因为AoT-Compilation。我们遇到了类似的问题并通过停用aot来解决它。

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

Answer 3

我有同样的问题，这是因为我注册了降级后的组件，名字不好。我这样注册了：

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

但应该是这样的：

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

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

downgradeModule在混合应用

3 个答案: