Angular 7.0.3 cli - Динамически загружать внешний модуль из пакета webpack - PullRequest
Новая
       18

Angular 7.0.3 cli - Динамически загружать внешний модуль из пакета webpack

0 голосов
/ 14 ноября 2018

У меня есть два приложения Angular 7.0.3 cli.При переходе по определенному маршруту я хотел бы получить второе приложение в виде внешнего пакета веб-пакетов от прокси-сервера и смонтировать его в моем основном приложении.

В частности, у меня возникают проблемы с пониманием того, как именно мне нужнонастроить свой файл angular.json и / или пользовательский файл webpack.config (если он вообще мне нужен), чтобы у меня был один пакет, который я могу подать.Кроме того, я не совсем уверен, как обращаться с моей функцией CustomModuleLoader.load ().

Немного предыстории:

Я использую APP_INITIALIZER, чтобы получить конфигурацию, которая содержит данные о том, какие маршруты нужно динамически добавлять.Я сбросил конфиг с новыми значениями.Допустим, мое второе приложение обрабатывает страницу клиентов: 

{ provide: APP_INITIALIZER, useFactory: (myCustomServiceFactory: SomeService) => () => myCustomServiceFactory.get(), deps: [SomeService], multi: true },

Служба: 

    get() {
        return this.http.get(this.url)
            .toPromise()
            .then((body: DataApiResponseMessage) => {
                let router = this.injector.get(Router);
                let routeArray: Route[] = [];
                //example route
                let route: Route = {
                    path: 'clients',
                    loadChildren: '@myapp/clients#ClientsModule'
                };
                routeArray.push(route);
                router.resetConfig([...routeArray, ...router.config]); 
            })
            .catch((error) => this.handleError(error))
    }

При переходе к / клиентам я запрашиваю внешний пакет из второго приложения:

app.use('/@myapp/clients', function (req, res) {
    apiProxy.web(req, res, { target: 'http://localhost:3001' });
});

Мое второе приложение отвечает dist / main.js 

res.sendFile(path.resolve(process.cwd(), 'dist/main.js'));

Мой CustomModuleLoader: 

import { Injectable, Injector, Compiler, NgModuleFactoryLoader, 
NgModuleFactory } from '@angular/core';

const SEPARATOR = '#';

@Injectable()
    export class CustomModuleLoader implements NgModuleFactoryLoader {
    constructor(private compiler: Compiler, private injector: Injector) {

    }

    load(path: string): Promise<NgModuleFactory<any>> {
        let [url, moduleName] = path.split(SEPARATOR);

        return this.loadScript(url).then(() => {
            //build and return ngModuleFactory here from
            //@myapp/clients bundle.js file or window (?)
        }).catch((err) => {
            console.log(err);
        });
    }

    loadScript(url) {
        return new Promise((resolve, reject) => {
            var script = document.createElement('script');
            var body = document.getElementsByTagName('body')[0];
            script.src = url;
            script.charset = "UTF-8";
            script.onload = function () {
                resolve();
            }
            script.onerror = function () {
                reject();
            }
            body.appendChild(script);
        });
    }
}

Во втором приложении я использую @angular-builders/custom-webpack:browser и объявив customWebpackConfig.У меня есть (пустой, потому что я не совсем уверен, что туда поместить) файл webpack.config.js, в котором я бы объявил угловые и другие основные библиотеки как внешние и вывел один файл bundle.js.

Какая конфигурация angular.json / webpack.config.js мне нужна для правильного обслуживания моего второго приложения?Как тогда я справлюсь с монтированием пакета веб-пакетов как ngModule в моем основном приложении внутри моей функции CustomModuleLoader.load ()?

...