如何解决我们如何在单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 举报,一经查实,本站将立刻删除。