导入 Angular 功能模块时渲染组件

Question

I have an Angular Application. In my app.module.ts declaration I would do something like this:

App.module (my Root Module):

let imports = [
     //....
];
if (!environment.production) {
   imports.push(DevToolsModule);
} 

@NgModule({
  imports: imports,
  ...
  })

DevToolsModule (my Feature Module):

My separate feature module DevToolsModule looks like the following:

@NgModule({
  declarations: [DeveloperToolsComponent],
  imports: [
    CommonModule
  ],
  entryComponents: [DeveloperToolsComponent]
})
export class DevToolsModule {}

What I would do now, is the following:

When my DevToolsModule gets imported, I would like to show a component on my screen with some developer information. It should be automatically added, I don't want to define it anywhere in my app.html template.

Did anyone achieve something like that?

Thanks so much, Sebastian

Answer 1

You can do the following,

    let developmentModules = [ 
         DevToolsModule
     ] 
     if(environment.production) {
        developmentModules = [];
        enableProdMode();
     }
     @NgModule({
       imports: [
         BrowserModule,
         ...developmentModules
       ],
       declarations: [],
       providers: [],
     })
     export class AppModule

The spread operator ... allows to easily place an expanded version of an array into another array.

Answer 2

When you import your feature module in root module, it will automatically be added to tree. You don't need to edit app.component.html template for that, but to demonstration, you should. If you can't edit app.component.html template, you can add the feature module component dynamically as @viewchild instance and ComponentFactoryResolver in app.component.ts, but I wouldn't recommend it. Instead you should define the feature module component as a decleration, then use it in template

<child-component></child-component>

Anyway if you still find this silly, you might want checkout the article: Dynamically add components to the DOM with Angular

Answer 3

Theoretically thinking of this:

constructor(@Optional() devToolsModule:DevToolsModule ) {
    if(devToolsModule){
       //add component to view
    }
}