How to dynamically add routes with components from a dynamically loaded module

Question

I have a dynamic component:

dynamic-component.module.ts

@NgModule({
  imports: [
      DynamicComponentRoutingModule,
      FormsModule,
      CommonModule,
      FormsModule,
  ],
  declarations: [
      DynamicComponent1,
      DynamicComponent2,
  ],
  exports: [DynamicComponent1,DynamicComponent2]
})
export class DynamicComponentModule {
}

And its routing:

dynamic-component.routing.ts

const routes: Routes = [
    {
        path: '',
        children: [
            {   
                path: 'dynamicComponent1',
                component: DynamicComponent1
            },
            {
                path: 'dynamicComponent2',
                component: DynamicComponent2,
            }
        ]
    }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DynamicComponentRoutingModule{}

I packaged this module into an angular package (using ng-packagr), and inside my app.component.ts I load it dynamically:

@ViewChild('vc', { read: ViewContainerRef }) vc: ViewContainerRef;

constructor(private router: Router, private _compiler: Compiler, private _injector: Injector, private route: ActivatedRoute) {
}

loadModule(path: string) {
    System.import(path).then((module) => {
        console.log(module);
        this._compiler.compileModuleAndAllComponentsAsync(module.DataTypesModule)
            .then((compiled) => {
                const m = compiled.ngModuleFactory.create(this._injector);
                const factory = compiled.componentFactories[0];
                if (factory) {
                    const cmp = factory.create(this._injector, [], null, m);
                    this.cmpRef = this.vc.createComponent(factory);
                }
            })
    });
}

As you can see, I've loaded the DynamicComponentModule and set the view in app.component to the first component in the DynamicComponentModule which happens to be DynamicComponent1.

The problem is when I want to navigate to DynamicComponent2 from DynamicComponent1. How to do that?

Edit:

Here is a plnkr that will show you the problem: https://embed.plnkr.co/rRCQx1N6nJvr0gBERINs/

hey, why do you load a module manually instead of using loadChildren as part of the router configuration? — Max Koretskyi
– Max Koretskyi, Commented Dec 19, 2017 at 14:52
Hi @AngularInDepth.com, I want to load the module dynamically at the run time because it is not known at the design time. — Hussain
– Hussain, Commented Dec 20, 2017 at 5:38
so do you want to register additional routes in the routes tree that come with the dynamically loaded module? — Max Koretskyi
– Max Koretskyi, Commented Dec 20, 2017 at 10:16
@AngularInDepth.com I've added a plnkr that shows the issue: embed.plnkr.co/rRCQx1N6nJvr0gBERINs , And yes, since I've loaded the module dynamically, I'd expect that its routes to be registered in the routes tree. — Hussain
– Hussain, Commented Dec 20, 2017 at 11:27

Max Koretskyi · Accepted Answer · 2017-12-21 07:12:37Z

1

You don't need to manually load and compile the module. You can use resetConfig API together with loadChildren. See the plunker.

Here is the relevant code:

loadModule() {
    this.router.resetConfig([
        ...this.router.config,
        {
            path: 'dynamicModule',
            loadChildren: './dynamic-component.module.ts#DynamicComponentModule'
        }
    ]);

    this.router.navigateByUrl('dynamicModule/dynamicComponent1');

You also need to add router-outlet to the my-app template:

@Component({
    selector: 'my-app',
    template: `
    <div>
      <h2>Hello {{name}}</h2>
      <router-outlet></router-outlet>
    </div>

And remove dynamicModule part from DynamicComponentRoutingModule:

const routes: Routes = [
    {
        path: 'dynamicComponent1',
        component: DynamicComponent1
    },
    {
        path: 'dynamicComponent2',
        component: DynamicComponent2,
    }
];

answered Dec 21, 2017 at 7:12

Max Koretskyi

106k69 gold badges356 silver badges524 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hussain Over a year ago

Thanks Maxim, I just figured it out this morning!

Collectives™ on Stack Overflow

How to dynamically add routes with components from a dynamically loaded module

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related