我们如何在单Spa应用程序内部包含node_modules？

问题描述

实际上，我们有三个有角度的项目，并且我们集成了概念单spa（https://single-spa.js.org/docs/ecosystem-angular/），但我们正在考虑 运行应用程序时出现的问题是没有考虑angular.json（node_modules），我们也无法在单spa配置文件中直接调用它。

所以任何人都可以帮助我确定将node_modules包含在单spa Webpack中。

以下是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/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","tsConfig": "tsconfig.spec.json","karmaConfig": "karma.conf.js","codeCoverage": true,"styles": [
              "./node_modules/jquery-ui-dist/jquery-ui.css","src/styles.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"
            ],"./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"
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）