downgradeModule doesn't start Angular5 part in hybrid app - angularjs

Question

Angular5 introduced a new way of upgrating app from AngularJS to Angular -
downgradeModule. It should resolve an issue with to eager change detection in this kind of hybrid application. So far, in Angular4 I used UpgradeModule successfully, but it caused some performance issue because of change detections. Now I'm trying to use downgradeModule. In this approach AngularJS is started first, next downgradeModule starts Angular. In this way AngularJS in running outside of AngularZone, what should calm down change detection.
main.ts which is pointed in .angular-cli.json as "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
]);
Now, AngularJS starts well, but Angular does not. No error on console, no tips. Just main selector eg. <my-app> is not evaluated.
Nothing changed in app.module.ts in context of previous working version.
#NgModule({
imports: [
CommonModule,
BrowserModule,
UpgradeModule,
RouterModule.forRoot([], { initialNavigation: false })
],
providers: [{provide: APP_BASE_HREF, useValue : '/shop/' }],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {
ngDoBootstrap() {}
}
I use some draft Angular doc, because the major one doesn't say anything about downgradeModule.
https://pr18487-aedf0aa.ngbuilds.io/guide/upgrade-performance
Does anyone know why Angular5 part is not starting?
Only for information purpose, the previous look of main.ts with UpgradeModule which worked quite well, but change detection.
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, have you tried adding AppComponent to the entryComponents in AppModule?
#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

It may be because of the AoT-Compilation. We had a similar Problem and solved it by deactivating aot.
Also see https://pr18487-aedf0aa.ngbuilds.io/guide/upgrade-performance#using-ahead-of-time-compilation-with-hybrid-apps

Answer 3

I had this same issue, and it was because I registered the downgraded component with a bad name. I registered it like this:
angular.module("myModule").directive("my-component", downgradeComponent({ component: MyComponent}));
But it should have been this:
angular.module("myModule").directive("myComponent", downgradeComponent({ component: MyComponent}));
So the component was never initialized because the name was wrong. And because the downgraded module is lazy-loaded (it isn't loaded until one of the components are loaded), the module was never initialized either. Fixing the directive name fixed the problem.