Load ngModule and its components based on conditional in Angular

Question

I'm new in angular and I was wondering if it's possible to load and module and its components I made based on a conditional on the app.module or where would it be the best place to do this.

Basically I want to do something like:

if(user.deparment === 'coms') {
  //Use the communications.module and its components
}

I have attached some picture so you guys can see the structure of the app. if necessary I can add the code instead of a picture.

App.module picture

Communications.module picture

Answer 1

You can do a simple ternary check to conditionally import a module. Like this:

import { NgModule, Optional } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({}) class MyModule {}

// toggle and watch the console
const production = true;

@NgModule({
  imports:      [ BrowserModule, production ? MyModule : []],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
  constructor(@Optional() module: MyModule) {
    console.log(module);
  }
}

Live demo

Answer 2

Modules are loaded at the start of your application. You need to import the components, and use whichever component you need. You need to register your component to a module, so that your component is accessible.