Love your concept

[Razgort]

Hi man,

I'm building a new app here in angular 8, i love your concept and i want to integrate it. But it's not working atm ...

When i click on enable on module a for example here is the output :

I managed to get it compiled by making changes to rxjs to migrate to new version. But as you can see in my attached file it seems not register by your service module. Would you have any idea why ?

[Razgort]

I add you here the modified files

import { Observable } from 'rxjs'; import { ModuleData } from './../models/module.model'; import { Http } from '@angular/http'; import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';

import { Injectable, Compiler, Inject, ReflectiveInjector, Injector, COMPILER_OPTIONS } from '@angular/core';

import { map } from 'rxjs/operators'

// Needed for the new modules import as AngularCore from '@angular/core'; import as AngularCommon from '@angular/common'; import as AngularRouter from '@angular/router'; import as AngularClarity from '@clr/angular'; import * as BrowserAnimations from '@angular/platform-browser/animations';

declare var SystemJS: any;

@Injectable() export class ModuleService { source = http://${window.location.host}/;

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;
        });
    });
}

}

[lmeijdam]

already had 1 on 1 contact with user! solved it!