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

Inkerman

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

Randee

Glad I could help :) – Randee

Question, if I do it based on a dynamic value like user.deparment would this still work? some users might be part of a different department so i can't have a constant and I will only know the value of that department once the user load the application – Inkerman

This approach will only work for static values. If you want to configure providers you can use forRoot static method angular.io/guide/ngmodule-faq#what-is-the-forroot-method – Randee

You might also be interested in juristr.com/blog/2018/01/ng-app-runtime-config – Randee

I will take a look into that! Thank you – Inkerman

@TomaszKula I want to import module based on a third environment dynamically but if I change const production to var its not working as expected, is there other way to import it based on environment conditions? – Inquest

they will still be included in the bundle... – Centipede

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.

Blow

so basically there's no way to decide what to do not load from the beginning of the application? so everything will load and then conditionally, i will decide what to use and what to do not use after they have been loaded into the app..because angular is aot – Inkerman

Yes, if you want to use a component, you should always declare it in the module since angular needs it for compilation. You can optionally import as shown by @Tomasz below – Blow

Delete this answer, it confuses the user and doesn't help. – Nyasaland