Question

我试图了解如何在编译时不通过主机应用程序知道模块的情况下，通过构建Angular CLI库项目从NPM包中动态加载NgModule。我要实现的目标如下：

/* HOST APPLICATION */
// app.module.ts
export interface IPlugin {
    path: string;
    moduleName: string;
    components: string[];
}

export function getPluginList(http: HttpClient) {
    let ret: IPlugin[] = [];
    ajax({ method: "GET", url: "*serverroot*/GetPluginList", async: false }).subscribe(list => ret = list.json());
    return ret;
}

@NgModule({
    [...],
    providers: [{ provide: PLUGIN_LIST, useFactory: getPluginList, deps: [HttpClient] }]
})
export class AppModule {}

// plugin.service.ts
export class PluginService {
    constructor(@Inject(PLUGIN_LIST) plugins: IPlugin[]) {}

    getComponentFactory(component: string) {
        const plugin = this.getComponentPlugin(component);
        /* Load plugin dynamically (download the NgModule factory via HTTP) */
        /* Grab its NgModume factory and extract the component factory */
    }
}

// dashboard.component.ts
export class DashboardComponent {
    constructor(private readonly pluginService: PluginService) {}

    private loadWidget(widgetComponent: string): void {
        const factory = this.pluginService.getComponentFactory(widgetComponent);
        this.viewRef.create(factory);
    }
}

我目前无法实现的部分是PluginService.getComponentFactory的主体。我已经进行了广泛的搜索，发现了很多类似的问题，但是所有这些问题都假定您想延迟加载项目中已有的一段源代码，或者至少在何时知道此代码文件的路径您构建应用程序。这样，webpack将采用这些路径并在生成的包中重写它们，以便您可以执行this.loader.load，其中this.loader与在角度路由器中找到的SystemJsNgModuleLoader相同。就我而言，我想通过HTTP调用加载模块，而不是通过生成的webpack require调用加载模块，而且我不知道该怎么做...任何人都可以帮忙吗？

Angular 6+-从NPM包动态加载NgModule

0 个答案: