Ndtyjky

I have two Angular 7.0.3 cli apps. When I navigate to a certain route, I would like to get the second app as an external webpack bundle from a proxy server and mount it on my main application.

Specifically I'm having trouble understanding how exactly I need to set up my angular.json and/or custom webpack.config file (if i need one at all) so that I have a single bundle that I can serve up. Additionally, I'm not quite sure how to handle my CustomModuleLoader.load() function.

Some background:

I am using APP_INITIALIZER to get a config that holds data on what routes need to be dynamically added. I reset the config with the new values. Lets say my second app is handling a clients page:

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

Service:

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

    }

When '/clients' is navigated to I ask for the external bundle from my second app:

app.use('/@myapp/clients', function (req, res) {

    apiProxy.web(req, res, { target: 'http://localhost:3001' });

});

My second app responds with dist/main.js

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

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

        });

    }

}

In my second app I'm using @angular-builders/custom-webpack:browser and declaring customWebpackConfig. I have (an empty because I'm not quite sure what to put in there) webpack.config.js file where I would declare angular and other major libraries as external and output a single bundle.js file.

What angular.json / webpack.config.js confiurgation do I need to correctly serve up my second application ? How then do I handle mounting the webpack bundle as an ngModule in my main app inside my CustomModuleLoader.load() function?