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

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.