How dynamically import component in Angular?

Question

I am developing an angular project consisting of a main project, a dozen sub-projects and a dozen global components. This project will be deployed at several clients. Customers will not physically own all subprojects. Some yes and others will only have 3-4.

I'm looking for a way to make sure to have the same code for everyone, possibly manage the subtleties with a configuration file. I am now stuck regarding a customer who does not have one subproject.

This component is imported into my app-routing.module.ts, of course I have an error that tells me the subproject is not found. I'm looking for a way to make a conditional import, or possibly another way if you know one, my only condition will be to keep a code identical for everyone.

app-routing.module.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AuthGuard} from './core/guards/auth.guard';

// Global components
import {HomeComponent} from './core/home/home.component';
import {LoginComponent} from './core/login/login.component';

// Sub projects
import {SubProject1Component} from '../../projects/sub1/sub1/src/app/sub1.component'; // <- Conditionally ignore this
import {SubProject2Component} from '../../projects/sub2/sub2/src/app/sub2.component'; // <- Conditionally ignore this
import {SubProject3Component} from '../../projects/sub3/sub3/src/app/sub3.component'; // <- Conditionally ignore this

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent, canActivate: [AuthGuard] },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard], children: [
      { path: 'sub1', component: SubProject1Component },
      { path: 'sub2', component: SubProject2Component },
      { path: 'sub3', component: SubProject3Component },
    ]},
  { path: '', redirectTo: 'home', pathMatch: 'full'},
];

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

Angular CLI: 7.0.7

Angular: 7.0.4

score 0 · Answer 1 · answered Mar 26 '19 at 08:07

0

Did you check this solution?

You can also use configuration file to load different configuration(components) for different clients.

answered Mar 26 '19 at 08:07

playerone

987
3
22
44

Unfortunately, this step is already too advanced, even before managing loading, I must first manage the import. For example, there is a client who does not have sub-project 3, I have this error I want to avoid : ERROR in src/app/app-routing.module.ts(17,38): error TS2307: Cannot find module '../../projects/sub3/sub3/src/app/sub3.component'. – Davide M. Mar 27 '19 at 11:14

How dynamically import component in Angular?

1 Answers1