1

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

main.ts这被指出.angular-cli.json为“主要”

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.tswith UpgradeModulewhich 的外观效果很好，但是变化检测。

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

3 回答 3

0

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() {}
}
于 2017-11-08T21:04:23.487 回答
0

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

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

但应该是这样的：

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

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

于 2018-05-15T19:00:08.790 回答
0

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

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

于 2018-04-11T08:42:59.727 回答