angular - シングルスパ アプリケーション内に node_modules を含めるにはどうすればよいですか?

Question

実際には3つのAngularプロジェクトがあり、コンセプトシングルスパ（https://single-spa.js.org/docs/ecosystem-angular/）を統合しましたが、angular.json（node_modules）を考慮していないアプリケーションの実行で問題が発生していますシングルスパ構成ファイル内でも直接呼び出すことはできません。

そのため、シングルスパ webpack に node_modules を含めるように構成するのを誰でも手伝ってくれます。

main.single-spa.js のコードはこちら

import { enableProdMode, NgZone } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ɵAnimationEngine as AnimationEngine } from '@angular/animations/browser';

import { singleSpaAngular } from 'single-spa-angular';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { singleSpaPropsSubject } from './single-spa/single-spa-props';

if (environment.production) {
  enableProdMode();
}

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic().bootstrapModule(AppModule);
  },
  template: '<app-vs-root />',
  NgZone,
  AnimationEngine,
});

export const bootstrap = [
  () => Promise.all([
    // loadScript('./node_modules/datatables.net-editor/js/dataTables.editor.js'),
    // loadScript('http://localhost:4800/assets/rappid/js/rappid.min.js'),
    // loadScript('http://localhost:4800/assets/rappid/js/joint.shapes.qad.js'),
    // loadScript('http://localhost:4800/assets/rappid/js/selection.js'),
    // loadScript('http://localhost:4800/assets/rappid/js/factory.js'),
    // loadScript('http://localhost:4800/assets/rappid/js/app.js')
  ]),
  lifecycles.bootstrap,
]
function loadScript(url: string) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    function onLoad() {
      resolve();
      cleanup();
    }
    function onError(event: Event) {
      reject(event);
      cleanup();
    }
    function cleanup() {
      script.removeEventListener('load', onLoad);
      script.removeEventListener('error', onError);
    }
    script.addEventListener('load', onLoad);
    script.addEventListener('error', onError);
    document.head.appendChild(script);
  });
}



// export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

Webpack 構成 js ファイル:

const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default;

module.exports = (config, options) => {
  const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options); 
  // Feel free to modify this webpack config however you'd like to
  return singleSpaWebpackConfig;
};

前もって感謝します。

angular.json ファイル:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Visualizer": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/Visualizer",
            "index": "src/index.html",
            "main": "src/main.single-spa.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/ngx-monaco-editor/assets/monaco",
                "output": "./assets/monaco/"
              }
            ],
            "styles": [
              "src/styles.css",
              "./node_modules/jquery-ui-dist/jquery-ui.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",       
              "./node_modules/font-awesome/css/font-awesome.css",
              "./node_modules/jointjs/css/layout.css",
              "./node_modules/jointjs/css/themes/material.css",
              "./node_modules/jointjs/css/themes/default.css",
              "./node_modules/datatables.net-dt/css/jquery.dataTables.min.css",
              "./node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css",
              "./node_modules/datatables.net-responsive-dt/css/responsive.dataTables.min.css",
              "./node_modules/datatables.net-buttons-dt/css/buttons.dataTables.min.css",
              "./node_modules/datatables.net-select-dt/css/select.dataTables.min.css",
              "./node_modules/datatables.net-editor-dt/css/editor.dataTables.min.css",
              "src/assets/rappid/css/rappid.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/jquery-ui-dist/jquery-ui.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/lodash/index.js",
              "./node_modules/backbone/backbone.js",
              "./node_modules/jointjs/dist/joint.js",   
              "./node_modules/jszip/dist/jszip.js",
              "./node_modules/datatables.net/js/jquery.dataTables.js",             
              "./node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js",
              "./node_modules/datatables.net-dt/js/dataTables.dataTables.min.js",
              "./node_modules/datatables.net-responsive-dt/js/responsive.dataTables.min.js",
              "./node_modules/jszip/dist/jszip.js",
              "./node_modules/datatables.net-buttons/js/dataTables.buttons.min.js",              
              "./node_modules/datatables.net-buttons/js/buttons.colVis.js",
              "./node_modules/datatables.net-buttons/js/buttons.flash.js",
              "./node_modules/datatables.net-buttons/js/buttons.html5.js",
              "./node_modules/datatables.net-buttons/js/buttons.print.js",
              "./node_modules/datatables.net-select/js/dataTables.select.min.js",
              "./node_modules/datatables.net-editor/js/dataTables.editor.js",
              "src/assets/rappid/js/app-new.js"            
          
            ],
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "replaceDuplicatePlugins": true           
            }
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "none",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "10mb",
                  "maximumError": "20mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "1mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "Sparkster-Visualizer:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Visualizer:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Visualizer:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "codeCoverage": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/ngx-monaco-editor/assets/monaco",
                "output": "./assets/monaco/"
              }
            ],
            "styles": [
              "./node_modules/jquery-ui-dist/jquery-ui.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css",
              "./node_modules/font-awesome/css/font-awesome.css",
              "./node_modules/jointjs/css/layout.css",
              "./node_modules/jointjs/css/themes/material.css",
              "./node_modules/jointjs/css/themes/default.css",
              "./node_modules/datatables.net-dt/css/jquery.dataTables.css",
              "./node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css",
              "src/assets/rappid/css/rappid.min.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/jquery-ui-dist/jquery-ui.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/lodash/index.js",
              "./node_modules/backbone/backbone.js",
              "./node_modules/jointjs/dist/joint.js",
              "./node_modules/datatables.net/js/jquery.dataTables.js",
              "./node_modules/datatables.net-responsive/js/dataTables.responsive.js",
              "src/assets/rappid/js/rappid.min.js",
              "src/assets/rappid/js/joint.shapes.qad.js",
              "src/assets/rappid/js/selection.js",
              "src/assets/rappid/js/factory.js",
              "src/assets/rappid/js/app.js"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "Visualizer:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "Visualizer:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "Visualizer",
  "cli": {
    "analytics": "09642dda-3c7a-46ea-9b06-c0e47c550b1c"
  }
}