Angular 9 - How Do I Downgrade Multiple Modules with Components? - angularjs

Question

I'm trying to group multiple Angular 9 Modules into a downgrade Module for AngularJS. I can get it to work fine for just one, but I'm having trouble getting it to work for multiple. I keep getting these errors:
With downgradedModule: specified
Error while instantiating component 'ExampleComponent': Unable to find the specified downgraded module.
Without downgradedModule: specified:
Error while instantiating component 'ExampleComponent': 'downgradedModule' not specified.
I've tried changed the value in downgradedModule to 'SharedModule', 'sharedModule', 'shared-module', and SharedModule with no luck. I'm not sure what else to do here.
Note: All of the manual bootstrapping is done. Not including it in my code samples because that part is working fine. Like I said, this works fine when I only downgrade one module
ngx.module.ts:
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { downgradeModule, downgradeComponent } from '#angular/upgrade/static';
import { SharedModule } from './shared/shared.module';
import { ViewerModule } from './viewer/viewer.module';
import { ExampleComponent } from './shared/example/example.component';
const sharedModule = (extraProviders) => platformBrowserDynamic(extraProviders).bootstrapModule(SharedModule);
const viewerModule = (extraProviders) => platformBrowserDynamic(extraProviders).bootstrapModule(ViewerModule);
export const NgxModule = angular
.module('ngx', [
downgradeModule(viewerModule),
downgradeModule(sharedModule)
])
.directive('exampleComponent',
downgradeComponent({ component: ExampleComponent, downgradedModule: 'sharedModule' })) // error
.name;
shared.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { CommonModule } from '#angular/common';
import { ExampleComponent } from './example/example.component';
#NgModule({
imports: [
BrowserModule,
CommonModule
],
declarations: [
ExampleComponent
],
entryComponents: [
ExampleComponent
]
})
export class SharedModule {
constructor() { }
ngDoBootstrap() {
}
}
viewer.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { CommonModule } from '#angular/common';
#NgModule({
imports: [
BrowserModule,
CommonModule
],
declarations: [
PdfComponent
],
entryComponents: [
PdfComponent
]
})
export class ViewerModule {
constructor() { }
ngDoBootstrap() {
}
}

Answer 1

I was able to work on this over the weekend and found my solution from reading the documentation a little more closely:
downgradedModule?: string: The name of the downgraded module (if any) that the component "belongs
to", as returned by a call to downgradeModule(). It is the module,
whose corresponding Angular module will be bootstrapped, when the
component needs to be instantiated.
Source: https://angular.io/api/upgrade/static/downgradeComponent
One pitfall others might run into is that you can't call downgradeModule() directly when assigning it to the downgradedModule property. You have to downgrade it first and store it in a variable first, then pass it in.
const ng2BootstrapFn = (extraProviders) => platformBrowserDynamic(extraProviders)
.bootstrapModule(SharedModule);
const downgradedSharedModule = downgradeModule(ng2BootstrapFn);
export const NgxModule= angular
.module('ngx', [downgradedSharedModule ])
.directive('exampleComponent', downgradeComponent({
component: ExampleComponent,
downgradedModule: downgradedSharedModule }))
.name;