20

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 enter image description here

Communications.module picture enter image description here

Patricio Vargas
  • 5,236
  • 11
  • 49
  • 100

2 Answers2

28

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

Tomasz Kula
  • 16,199
  • 2
  • 68
  • 79
  • 1
    Glad I could help :) – Tomasz Kula Apr 10 '18 at 21:39
  • 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 – Patricio Vargas Apr 10 '18 at 21:41
  • 3
    This approach will only work for static values. If you want to configure providers you can use `forRoot` static method https://angular.io/guide/ngmodule-faq#what-is-the-forroot-method – Tomasz Kula Apr 10 '18 at 21:49
  • 1
    You might also be interested in https://juristr.com/blog/2018/01/ng-app-runtime-config/ – Tomasz Kula Apr 10 '18 at 21:50
  • I will take a look into that! Thank you – Patricio Vargas Apr 11 '18 at 03:16
  • @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? – Nikhil Radadiya Mar 13 '19 at 10:54
  • 1
    they will still be included in the bundle... – Timon May 02 '23 at 10:11
1

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.

Raksha Jayaram
  • 9
  • 1
  • 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 – Patricio Vargas Apr 10 '18 at 21:18
  • 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 – Raksha Jayaram Apr 10 '18 at 21:36