@NgModule static forRoot bei der Implementierung dynamischer Module

Ich habe diesen Code in @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
 ],

Wenn Sie sehen können, injiziere ich den ServicetestService in das LibraryTestModule.

Aber in meinem Fall lade ich dieses Modul dynamisch mit system.js mit dem folgenden Code:

// 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;
            });
        });
    });

Gibt es jetzt eine Möglichkeit, den ServiceTestService in die compileModuleAndAllComponentsAsync- Methode einzufügen , wenn die Module dynamisch geladen werden?

Nach einer Weile habe ich eine Lösung gefunden.

widget.module.ts

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

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

  providers: [
  ]
})
export class WidgetModule { }

Nehmen wir nun an, Sie laden dieses Modul dynamisch in eine Shell-Komponente:

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>

Wie Sie sehen können, wenn Sie Ihre Abhängigkeit (die bereitgestellt durch den Verbraucher des Moduls ) verwendet für Ihre Komponenten , die Teil dieses Moduls sind und Sie die Verwendung compileModuleAndAllComponentsAsyncMethode werden die Komponenten nicht zugreifen können , dass die Abhängigkeit, es sei denn , Ein weiterer Injektor wird manuell erstellt.

Dies liegt daran, dass die Komponenten, wie Sie am Namen der Methode erkennen können, bereits kompiliert sind, sodass Sie keine anderen Abhängigkeiten im laufenden Betrieb hinzufügen können als die im Modul explizit definierten .

Wenn die Komponenten innerhalb des Moduls von der bereitgestellten Abhängigkeit abhängen, können Sie dies erreichen, indem Sie zuerst nur das Modul kompilieren ( compileModuleAsync) und dann jede Komponente einzeln kompilieren (es mag mühsam klingen, aber ich kann Ihnen versichern, dass Sie Spaß an der Arbeit mit diesem Material haben werden ). Auf diese Weise können sie jedes dynamisch bereitgestellte Abhängigkeitsereignis zur Laufzeit einfügen.

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);
                });
        })

}

Stellen Sie jetzt jedes Mal, wenn Sie Ihrem Modul eine weitere Komponente hinzufügen möchten, sicher, dass Sie diese zu entryComponentsund zu Ihrem Komponentenarray hinzufügen, damit Sie sie mit abrufen können module.injector.get().

Hier ist ein StackBlitz- Beispiel .