ng new ng-plugin-demo

ng g library plugin1
ng g component main-screen --project=plugin1
ng g component child-screen --project=plugin1
ng g library plugin2
ng g component main-screen --project=plugin2

<p>Plugin1 works!</p>
<p>Module base path is {{ moduleBasePath }}</p>
<a [routerLink]="['child']">Go to the child</a>
<br />
<a [routerLink]="'..'">Go back</a>
<br />
<img [src]="moduleBasePath + '/assets/smile.png'" />

<p>child-screen works!</p>
<br />
<a [routerLink]="'..'">Go back</a>

const routes: Routes = [
  {
    path: '',
    component: MainScreenComponent
  },
  {
    path: 'child',
    component: ChildScreenComponent
  }
];

imports: [RouterModule.forChild(routes)],

imports: [
    Plugin1RoutingModule
  ],

"assets": ["./assets"],

ng g library common

export interface DemoPlugin {
  path: string;
  baseUrl: string;
  pluginFile: string;
  moduleName: string;
}

ng g service plugin-config --project=common

export class PluginConfigService {
  public value: DemoPlugin[] = [];
  public loaded = false;
  public constructor() { }
  public load(uri: string): Promise<DemoPlugin[]> {
    return fetch(uri).then(result => result.json()).then(json => {
      this.value = json;
      this.loaded = true;
      return json;
    });
  }
}

export const MODULE_BASE_PATH = new InjectionToken<string>('MODULE_BASE_PATH');

ng g module plugin-loader --routing

import * as AngularAnimations from '@angular/animations';
import * as AngularCommon from '@angular/common';
import * as AngularCommonHttp from '@angular/common/http';
import * as AngularCompiler from '@angular/compiler';
import * as AngularCore from '@angular/core';
import * as AngularForms from '@angular/forms';
import * as AngularPlatformBrowser from '@angular/platform-browser';
import * as AngularPlatformBrowserDynamic from '@angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import * as AngularRouter from '@angular/router';
import * as rxjs from 'rxjs';
import * as RxjsOperators from 'rxjs/operators';
import * as Common from 'common';
export const dependencyMap: { [propName: string]: any } = {
  '@angular/animations': AngularAnimations,
  '@angular/common': AngularCommon,
  '@angular/common/http': AngularCommonHttp,
  '@angular/compiler': AngularCompiler,
  '@angular/core': AngularCore,
  '@angular/forms': AngularForms,
  '@angular/platform-browser': AngularPlatformBrowser,
  '@angular/platform-browser-dynamic': AngularPlatformBrowserDynamic,
  '@angular/platform-browser/animations': BrowserAnimationsModule,
  '@angular/router': AngularRouter,
  rxjs,
  'rxjs/operators': RxjsOperators,
  'common': Common
};

const loadModule = (url: string): Promise<any> => {
  try {
    return fetch(url)
      .then((response) => response.text())
      .then((source) => {
        const exports = {}; // This will hold module exports
        // Shim 'require'
        const require = (module) => {
          if (!dependencyMap[module]) {
            throw new Error(`No '${module}' module defined in the provided dependency map for the '${url}' module`);
          }
          return dependencyMap[module];
        };
        eval(source); // Interpret the plugin source
        return exports;
      });
  } catch (error) {
    const message =
      `Cannot load a module at '${url}'. ` +
      (error instanceof Error ? `${error.name} ${error.message}` : JSON.stringify(error));
    window.alert(message);
    return Promise.reject(message);
  }
};

@NgModule({
  imports: [RouterModule.forChild([])],
  exports: [RouterModule],
  providers: [
    {
      provide: ROUTES,
      useFactory: (pluginConfigService: PluginConfigService) => pluginConfigService.value.map(plugin => ({
        matcher: (_segments: UrlSegment[], group: UrlSegmentGroup, _route: Route): UrlMatchResult | null => group.segments[0].path === plugin.path ? { consumed: [] } : null,
        loadChildren: () => loadModule(`${plugin.baseUrl}/${plugin.pluginFile}?v=${new Date().getTime()}`).then(m => m[plugin.moduleName])
      })),
      deps: [PluginConfigService],
      multi: true,
    },
  ],
})
export class PluginLoaderRoutingModule { }

imports: [
    CommonModule,
    PluginLoaderRoutingModule
  ]

providers: [
    PluginConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: (pluginConfigService: PluginConfigService) =>
        () => pluginConfigService.load(`${environment.pluginConfigUri}?v=${new Date().getTime()}`),
      deps: [PluginConfigService],
      multi: true
    }
  ],

export const environment: Environment = {
  production: false,
  pluginConfigUri: './assets/plugin-config.json'
};

[
  {
    "path": "plugin1",
    "baseUrl": "http://localhost:4261/plugin1",
    "pluginFile": "bundles/plugin1.umd.js",
    "moduleName": "Plugin1Module"
  },
  {
    "path": "plugin2",
    "baseUrl": "http://localhost:4261/plugin2",
    "pluginFile": "bundles/plugin2.umd.js",
    "moduleName": "Plugin2Module"
  }
]

const staticRoutes: Route[] = [];
@NgModule({
  imports: [RouterModule.forRoot([])],
  exports: [RouterModule],
  providers: [
    {
      provide: ROUTES,
      useFactory: (pluginConfigService: PluginConfigService) => {
        const pluginRoute = {
          // This function is called when APP_INITIALIZER is not yet completed, so matcher is the only option
          matcher: (_segments: UrlSegment[], group: UrlSegmentGroup, _route: Route): UrlMatchResult | null =>
            group.segments.length && pluginConfigService.value.some(plugin => plugin.path === group.segments[0].path) ? { consumed: [group.segments[0]] } : null,
          // Lazy load the plugin loader module because it may contain many 'heavy' dependencies
          loadChildren: () => import('./plugin-loader/plugin-loader.module').then((m) => m.PluginLoaderModule)
        };
        return [...staticRoutes, pluginRoute];
      },
      deps: [PluginConfigService],
      multi: true,
    },
  ]
})
export class AppRoutingModule { }

export class AppComponent {
  public constructor(public readonly pluginConfigService: PluginConfigService) {}
}

<ng-container *ngFor="let plugin of pluginConfigService.value">
  <a [routerLink]="'/' + plugin.path">{{ plugin.moduleName }}</a>
  <br />
</ng-container>
<router-outlet></router-outlet>

const moduleBasePathFactory = (pluginConfigService: PluginConfigService): string =>
  pluginConfigService.value.find(plugin => plugin.path === 'plugin1').baseUrl;

providers: [
    {
      provide: MODULE_BASE_PATH,
      useFactory: moduleBasePathFactory,
      deps: [PluginConfigService],
    }
  ]

public constructor(@Inject(MODULE_BASE_PATH) public readonly moduleBasePath: string) {}

<img [src]="moduleBasePath + '/assets/smile.png'" />

npm install --save-dev http-server

"serve:plugins": "http-server ./dist/ --port=4261 --cors",

"build:all": "ng build common && ng build plugin1 && ng build plugin2 && ng build"

export function find(plugin: DemoPlugin): boolean {
  return plugin.path === 'plugin1';
}
export function moduleBasePathFactory(pluginConfigService: PluginConfigService): string {
  return pluginConfigService.value.find(find).baseUrl;
}

export const routerModule = RouterModule.forChild(routes);
  imports: [routerModule],

providers: [
    {
      provide: ROUTES,
      useFactory: (pluginConfigService: PluginConfigService) => {
        const pluginRoute = {
          // This function is called when APP_INITIALIZER is not yet completed, so matcher is the only option
          matcher: (_segments: UrlSegment[], group: UrlSegmentGroup, _route: Route): UrlMatchResult | null =>
            group.segments.length && pluginConfigService.value.some(plugin => plugin.path === group.segments[0].path) ? { consumed: [group.segments[0]] } : null,
          // Lazy load the plugin loader module because it may contain many 'heavy' dependencies
          loadChildren: () => import('./plugin-loader/plugin-loader.module').then((m) => m.PluginLoaderModule)
        };
        return [...staticRoutes, pluginRoute];
      },
      // The member below must exist if Ivy is off
      useValue: [],
      deps: [PluginConfigService],
      multi: true,
    },
  ]

export function createCompiler(compilerFactory: CompilerFactory) {
  return compilerFactory.createCompiler();
}

providers: [
    { provide: COMPILER_OPTIONS,
      useValue: {},
      multi: true
    },
    {
      provide: CompilerFactory,
      useClass: JitCompilerFactory,
      deps: [COMPILER_OPTIONS],
    },
    {
      provide: Compiler,
      useFactory: createCompiler,
      deps: [CompilerFactory],
    },
  ]

providers: [
    {
      provide: ROUTES,
      useFactory: (pluginConfigService: PluginConfigService, compiler: Compiler) => pluginConfigService.value.map(plugin => ({
        matcher: (_segments: UrlSegment[], group: UrlSegmentGroup, _route: Route): UrlMatchResult | null => group.segments[0].path === plugin.path ? { consumed: [] } : null,
        loadChildren: () =>
          loadModule(`${plugin.baseUrl}/${plugin.pluginFile}?v=${new Date().getTime()}`)
            .then(m => m[plugin.moduleName])
            .then(result => result instanceof NgModuleFactory ? Promise.resolve(result) : compiler.compileModuleAsync(result))
      })),
      // The member below must exist if Ivy is off
      useValue: [],
      deps: [PluginConfigService, Compiler],
      multi: true,
    },
  ]

let service: PluginConfigService;

export function pluginMatcher(_segments: UrlSegment[], group: UrlSegmentGroup, _route: Route): UrlMatchResult | null {
  return group.segments.length && service.value.some(plugin => plugin.path === group.segments[0].path) ? { consumed: [group.segments[0]] } : null;
}

imports: [RouterModule.forRoot([
    ...staticRoutes,
    {
      matcher: pluginMatcher,
      loadChildren: () => import('./plugin-loader/plugin-loader.module').then((m) => m.PluginLoaderModule)
    }
  ])],

public constructor(private readonly pluginConfigService: PluginConfigService) {
    service = this.pluginConfigService;
  }