Love your concept about angular-umd-dynamic-example HOT 2 CLOSED

constructor(private compiler: Compiler, private http: Http) {
    console.log(compiler);
}

loadModules(): Observable<ModuleData[]> {
    return this.http.get("./assets/plugins/modules.json")
        .pipe(map(res => res.json()));
}

loadModule(moduleInfo: ModuleData): Observable<any> {
    let url = this.source + moduleInfo.location;
    return this.http.get(url)
    .pipe(
        map(res => res.text()),
        map(source => {
            const exports = {}; // this will hold module exports
            const modules = {   // this is the list of modules accessible by plugins
                '@angular/core': AngularCore,
                '@angular/common': AngularCommon,
                '@angular/router': AngularRouter,
                '@angular/platform-browser/animations': BrowserAnimations,
                '@clr/angular': AngularClarity
            };


            // shim 'require' and eval
            const require: any = (module) => modules[module];
            eval(source);

            // Need to check if there is another solution for eval as this is described as 'Evil'

            this.compiler.compileModuleAndAllComponentsSync(exports[`${moduleInfo.moduleName}`])
            //console.log(exports); // disabled as this object is cleared anyway
            return exports;
        })
        )
        ;
}

loadModuleSystemJS(moduleInfo: ModuleData): Promise<any> {
    let url = this.source + moduleInfo.location;
    SystemJS.set('@angular/core', SystemJS.newModule(AngularCore));
    SystemJS.set('@angular/common', SystemJS.newModule(AngularCommon));
    SystemJS.set('@angular/router', SystemJS.newModule(AngularRouter));
    SystemJS.set('@angular/platform-browser/animations', SystemJS.newModule(BrowserAnimations));
    SystemJS.set('@clr/angular', SystemJS.newModule(AngularClarity));

    // now, import the new module
    return SystemJS.import(`${url}`).then((module) => {
        console.log(module);
        return this.compiler.compileModuleAndAllComponentsAsync(module[`${moduleInfo.moduleName}`]).then(compiled => {
            console.log(compiled);
            return module;
        });
    });
}