@NgModule static forRoot ao implementar módulos dinâmicos

Eu tenho este código em @NgModule:

@NgModule({
 declarations: [
   AppComponent,
   DashboardComponent
 ],
 imports: [
   BrowserModule,
   BrowserAnimationsModule,
   ClarityModule,
   RouterModule.forRoot([
     {
       path: '', redirectTo: 'dashboard', pathMatch: 'full'
     },
     {
       path: 'dashboard', component: DashboardComponent
     },
   ], {useHash: true}),
   LibraryTestModule.forRoot(ServicetestService),
   HttpModule
 ],

Se você pode ver, estou injetando o ServicetestService no LibraryTestModule.

Mas, no meu caso, estou carregando este módulo dinamicamente usando system.js usando o código abaixo:

// now, import the new module
    return SystemJS.import(`${url}`).then((module) => { console.log(module); return SystemJS.import(`${url}`).then((module) => {
            console.log(module);
            return this.compiler.compileModuleAndAllComponentsAsync(module[`${moduleInfo.moduleName}`]).then(compiled => {
                console.log(compiled);
                return module;
            });
        });
    });

Agora existe alguma maneira de injetar o ServiceTestService dentro do método compileModuleAndAllComponentsAsync ao carregar os módulos dinamicamente ??

Depois de explorar um pouco, acho que cheguei a uma solução.

widget.module.ts

export const DYNAMIC_CONFIG = new InjectionToken('DYNAMIC_CONFIG');

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [WidgetComponent],
  entryComponents: [WidgetComponent]

  providers: [
  ]
})
export class WidgetModule { }

E agora vamos presumir que você está carregando dinamicamente este módulo em um componente shell:

shell.component.ts

ngOnInit () {
    const parentInjector = Injector.create({
        providers: [
            { provide: DYNAMIC_CONFIG, useValue: { message: 'CUSTOM VALUE PROVIDED BY THE CONSUME!' } }
        ],
        parent: this.inj
    });

    import('./widget/widget.module.ts')
        .then(m => {
            this.compiler.compileModuleAndAllComponentsAsync(m.WidgetModule)
                .then(moduleWithCompFactories => {
                    const module = moduleWithCompFactories.ngModuleFactory.create(parentInjector);

                    /**
                     * Adding the components from the lazy-loaded module
                     * into the current view
                     */
                    this.vc.createComponent(moduleWithCompFactories.componentFactories[0], 0, parentInjector);
                })
        })

}

shell.component.html

<ng-container #vc></ng-container>

Como você pode ver, se a sua dependência (que é fornecida pelo o consumidor do módulo ) será utilizado em toda a seus componentes que fazem parte desse módulo e você usar o compileModuleAndAllComponentsAsyncmétodo, os componentes não será capaz de acessar essa dependência, a menos outro injetor é criado manualmente.

Isso porque, como você pode perceber pelo nome do método, os componentes já estarão compilados, então você não pode adicionar outras dependências na hora, além daquelas definidas explicitamente no módulo.

Se os componentes dentro do módulo dependem da dependência fornecida, você pode conseguir isso apenas compilando o módulo primeiro ( compileModuleAsync) e depois compilar cada componente, individualmente (pode parecer tedioso, mas posso garantir que você gostará de trabalhar com essas coisas ) Desta forma, eles serão capazes de injetar qualquer dependência fornecida dinamicamente, evento em tempo de execução.

widget.module.ts

@NgModule({
  imports: [
    CommonModule,
    // RouterModule.forChild([{ path: '', component: WidgetComponent }])
  ],
  declarations: [WidgetComponent],

  // No need to use this when using `compileModuleAndAllComponentsAsync`
  entryComponents: [WidgetComponent],
  providers: [
    {
      provide: 'widgets',
      useValue: [
        {
          name: 'widget1',
          component: WidgetComponent,
        },
      ],
    }
  ]
})
export class WidgetModule { }

shell.component.ts

ngOnInit () {
    const parentInjector = Injector.create({
        providers: [
            { provide: DYNAMIC_CONFIG, useValue: { message: 'CUSTOM VALUE PROVIDED BY THE CONSUME!' } }
        ],
        parent: this.inj
    });

    import('./widget/widget.module.ts')
        .then(m => {
            this.compiler.compileModuleAsync(m.WidgetModule)
                .then(factory => {
                    const module = factory.create(parentInjector);

                    const [firstWidget] = module.injector.get('widgets');

                    const componentFactory = module.componentFactoryResolver.resolveComponentFactory(firstWidget.component);

                    this.vc.createComponent(componentFactory);
                });
        })

}

Agora, toda vez que você quiser adicionar outro componente ao seu módulo, certifique-se de adicioná-lo ao entryComponentse ao seu array de componentes para que possa recuperá-los usando module.injector.get().

Aqui está um exemplo StackBlitz .