Load new modules dynamically in run-time with Angular CLI & Angular 5

I was facing the same problem. As far as I understand it until now:

Webpack puts all resources in a bundle and replaces all System.import with __webpack_require__. Therefore, if you want to load a module dynamically at runtime by using SystemJsNgModuleLoader, the loader will search for the module in the bundle. If the module does not exist in the bundle, you will get an error. Webpack is not going to ask the server for that module. This is a problem for us, since we want to load a module that we do not know at build/compile time.What we need is loader that will load a module for us at runtime (lazy and dynamic). In my example, I am using SystemJS and Angular 6 / CLI.

1. Install SystemJS: npm install systemjs –save
2. Add it to angular.json: "scripts": [ "node_modules/systemjs/dist/system.src.js"]

app.component.ts

import { Compiler, Component, Injector, ViewChild, ViewContainerRef } from '@angular/core';import * as AngularCommon from '@angular/common';import * as AngularCore from '@angular/core';declare var SystemJS;@Component({  selector: 'app-root',  template: '<button (click)="load()">Load</button><ng-container #vc></ng-container>'})export class AppComponent {  @ViewChild('vc', {read: ViewContainerRef}) vc;  constructor(private compiler: Compiler,               private injector: Injector) {  }  load() {    // register the modules that we already loaded so that no HTTP request is made    // in my case, the modules are already available in my bundle (bundled by webpack)    SystemJS.set('@angular/core', SystemJS.newModule(AngularCore));    SystemJS.set('@angular/common', SystemJS.newModule(AngularCommon));    // now, import the new module    SystemJS.import('my-dynamic.component.js').then((module) => {      this.compiler.compileModuleAndAllComponentsAsync(module.default)            .then((compiled) => {                let moduleRef = compiled.ngModuleFactory.create(this.injector);                let factory = compiled.componentFactories[0];                if (factory) {                    let component = this.vc.createComponent(factory);                    let instance = component.instance;                }            });    });  }}

my-dynamic.component.ts

import { NgModule, Component } from '@angular/core';import { CommonModule } from '@angular/common';import { Other } from './other';@Component({    selector: 'my-dynamic-component',    template: '<h1>Dynamic component</h1><button (click)="LoadMore()">LoadMore</button>'})    export class MyDynamicComponent {    LoadMore() {        let other = new Other();        other.hello();    }}@NgModule({    declarations: [MyDynamicComponent],    imports: [CommonModule],})export default class MyDynamicModule {}

other.component.ts

export class Other {    hello() {        console.log("hello");    }}

As you can see, we can tell SystemJS what modules already exist in our bundle. So we do not need to load them again (SystemJS.set). All other modules that we import in our my-dynamic-component (in this example other) will be requested from the server at runtime.

I've used the https://github.com/kirjs/angular-dynamic-module-loading solution with Angular 6's library support to create an application I shared on Github. Due to company policy it needed to be taken offline. As soon as discussions are over regarding the example project source I will share it on Github!

UPDATE: repo can be found ; https://github.com/lmeijdam/angular-umd-dynamic-example

I have tested in Angular 6, below solution works for dynamically loading a module from an external package or an internal module.

1. If you want to dynamically load a module from a library project or a package:

I have a library project "admin" (or you can use a package) and an application project "app".In my "admin" library project, I have AdminModule and AdminRoutingModule. In my "app" project:

a. Make change in tsconfig.app.json:

  "compilerOptions": {    "module": "esNext",  },

b. In app-routing.module.ts:

const routes: Routes = [    {        path: 'admin',        loadChildren: async () => {            const a = await import('admin')            return a['AdminModule'];        }    },    {        path: '',        redirectTo: '',        pathMatch: 'full'    }];@NgModule({    imports: [RouterModule.forRoot(routes)],    exports: [RouterModule]})export class AppRoutingModule {}

2. if you want to load a module from the same project.

There are 4 different options:

a. In app-routing.module.ts:

const routes: Routes = [    {        path: 'example',        /* Options 1: Use component */        // component: ExampleComponent,  // Load router from component        /* Options 2: Use Angular default lazy load syntax */        loadChildren: './example/example.module#ExampleModule',  // lazy load router from module        /* Options 3: Use Module */        // loadChildren: () => ExampleModule, // load router from module        /* Options 4: Use esNext, you need to change tsconfig.app.json */        /*        loadChildren: async () => {            const a = await import('./example/example.module')            return a['ExampleModule'];        }        */    },    {        path: '',        redirectTo: '',        pathMatch: 'full'    }];@NgModule({    imports: [RouterModule.forRoot(routes)],    exports: [RouterModule]})export class AppRoutingModule {}``