Load new modules dynamically at runtime using Angular CLI and Angular 5

I had the same problem. As I understand it so far:

Webpack puts all resources in a bundle and replaces everything System.import

with __webpack_require__

. So if you want to dynamically load a module at runtime using SystemJsNgModuleLoader, the loader will look for the bundled module. If the module does not exist in the bundle, you will receive an error message. Webpack will not ask the server for this module. This is a problem for us since we want to load a module that we don't know at build / compile time. We need a loader that will load the module for us at runtime (lazy and dynamic). In my example, I am using SystemJS and Angular 6 / CLI.

• Install SystemJS: npm install systemjs -save
• 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 which modules already exist in our bundle. So we don't need to load them ( SystemJS.set

) again . All other modules that we import in our my-dynamic-component

(in this example other

) will be requested from the server at runtime.

Do it with angular library 6 and do your thing. I just experimented with this and I can share the standalone angular AOT module with the main application without rebuilding the latter.

1. In angular library set to angularCompilerOptions.skipTemplateCodegen
   
   false and after building library you will get module factory.
2. After that, create the umd module using the rollup as follows: rollup dist/plugin/esm2015/lib/plugin.module.ngfactory.js --file src/assets/plugin.module.umd.js --format umd --name plugin
   
   
3. Load the original umd text package into the main application and evaluate it using the module context.
4. You can now access the ModuleFactory from the export object.

Here https://github.com/iwnow/angular-plugin-example you can find how to develop a plugin with offline build and AOT

Yes, you can use lazy load modules by referring to them as modules in the router. Here is an example https://github.com/start-angular/SB-Admin-BS4-Angular-6

• First add all the components you are using into one module.
• Now refer to this module in the router and angular will be lazy to load your module into the view.

I tested in Angular 6, below solution works to load module dynamically from external package or internal module.

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

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

and. Make changes to 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:

and. 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 {
}
''