title: How we can include node_modules in inside Single-spa Application?
body: <p>Actually we have three angular projects and we integrated concept single-spa (<a href="https://single-spa.js.org/docs/ecosystem-angular/" rel="nofollow noreferrer">https://single-spa.js.org/docs/ecosystem-angular/</a>) but we are encountring
  issues in running application it's not considering angular.json(node_modules) we are not able call directly also inside single-spa configuration file.</p>
  <p>so anyone can help me to confiure to include node_modules in single-spa webpack.</p>
  <p><strong>Here the code for main.single-spa.js</strong></p>
  <pre><code>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 =&gt; {
      singleSpaPropsSubject.next(singleSpaProps);
      return platformBrowserDynamic().bootstrapModule(AppModule);
    },
    template: '&lt;app-vs-root /&gt;',
    NgZone,
    AnimationEngine,
  });
  
  export const bootstrap = [
    () =&gt; 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) =&gt; {
      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;
  </code></pre>
  <p><strong>Webpack config js file:</strong></p>
  <pre><code>const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default;
  
  module.exports = (config, options) =&gt; {
    const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options); 
    // Feel free to modify this webpack config however you'd like to
    return singleSpaWebpackConfig;
  };
  </code></pre>
  <p>Thanks in advance.</p>
  <p><strong>angular.json file:</strong></p>
  <pre><code>{
    &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
    &quot;version&quot;: 1,
    &quot;newProjectRoot&quot;: &quot;projects&quot;,
    &quot;projects&quot;: {
      &quot;Visualizer&quot;: {
        &quot;projectType&quot;: &quot;application&quot;,
        &quot;schematics&quot;: {},
        &quot;root&quot;: &quot;&quot;,
        &quot;sourceRoot&quot;: &quot;src&quot;,
        &quot;prefix&quot;: &quot;app&quot;,
        &quot;architect&quot;: {
          &quot;build&quot;: {
            &quot;builder&quot;: &quot;@angular-builders/custom-webpack:browser&quot;,
            &quot;options&quot;: {
              &quot;outputPath&quot;: &quot;dist/Visualizer&quot;,
              &quot;index&quot;: &quot;src/index.html&quot;,
              &quot;main&quot;: &quot;src/main.single-spa.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.app.json&quot;,
              &quot;aot&quot;: true,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;,
                {
                  &quot;glob&quot;: &quot;**/*&quot;,
                  &quot;input&quot;: &quot;node_modules/ngx-monaco-editor/assets/monaco&quot;,
                  &quot;output&quot;: &quot;./assets/monaco/&quot;
                }
              ],
              &quot;styles&quot;: [
                &quot;src/styles.css&quot;,
                &quot;./node_modules/jquery-ui-dist/jquery-ui.css&quot;,
                &quot;./node_modules/bootstrap/dist/css/bootstrap.min.css&quot;,       
                &quot;./node_modules/font-awesome/css/font-awesome.css&quot;,
                &quot;./node_modules/jointjs/css/layout.css&quot;,
                &quot;./node_modules/jointjs/css/themes/material.css&quot;,
                &quot;./node_modules/jointjs/css/themes/default.css&quot;,
                &quot;./node_modules/datatables.net-dt/css/jquery.dataTables.min.css&quot;,
                &quot;./node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css&quot;,
                &quot;./node_modules/datatables.net-responsive-dt/css/responsive.dataTables.min.css&quot;,
                &quot;./node_modules/datatables.net-buttons-dt/css/buttons.dataTables.min.css&quot;,
                &quot;./node_modules/datatables.net-select-dt/css/select.dataTables.min.css&quot;,
                &quot;./node_modules/datatables.net-editor-dt/css/editor.dataTables.min.css&quot;,
                &quot;src/assets/rappid/css/rappid.css&quot;
              ],
              &quot;scripts&quot;: [
                &quot;./node_modules/jquery/dist/jquery.min.js&quot;,
                &quot;./node_modules/jquery-ui-dist/jquery-ui.min.js&quot;,
                &quot;./node_modules/bootstrap/dist/js/bootstrap.min.js&quot;,
                &quot;./node_modules/lodash/index.js&quot;,
                &quot;./node_modules/backbone/backbone.js&quot;,
                &quot;./node_modules/jointjs/dist/joint.js&quot;,   
                &quot;./node_modules/jszip/dist/jszip.js&quot;,
                &quot;./node_modules/datatables.net/js/jquery.dataTables.js&quot;,             
                &quot;./node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js&quot;,
                &quot;./node_modules/datatables.net-dt/js/dataTables.dataTables.min.js&quot;,
                &quot;./node_modules/datatables.net-responsive-dt/js/responsive.dataTables.min.js&quot;,
                &quot;./node_modules/jszip/dist/jszip.js&quot;,
                &quot;./node_modules/datatables.net-buttons/js/dataTables.buttons.min.js&quot;,              
                &quot;./node_modules/datatables.net-buttons/js/buttons.colVis.js&quot;,
                &quot;./node_modules/datatables.net-buttons/js/buttons.flash.js&quot;,
                &quot;./node_modules/datatables.net-buttons/js/buttons.html5.js&quot;,
                &quot;./node_modules/datatables.net-buttons/js/buttons.print.js&quot;,
                &quot;./node_modules/datatables.net-select/js/dataTables.select.min.js&quot;,
                &quot;./node_modules/datatables.net-editor/js/dataTables.editor.js&quot;,
                &quot;src/assets/rappid/js/app-new.js&quot;            
            
              ],
              &quot;customWebpackConfig&quot;: {
                &quot;path&quot;: &quot;./extra-webpack.config.js&quot;,
                &quot;replaceDuplicatePlugins&quot;: true           
              }
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;fileReplacements&quot;: [
                  {
                    &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                    &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                  }
                ],
                &quot;optimization&quot;: true,
                &quot;outputHashing&quot;: &quot;none&quot;,
                &quot;sourceMap&quot;: false,
                &quot;extractCss&quot;: true,
                &quot;namedChunks&quot;: false,
                &quot;extractLicenses&quot;: true,
                &quot;vendorChunk&quot;: false,
                &quot;buildOptimizer&quot;: true,
                &quot;budgets&quot;: [
                  {
                    &quot;type&quot;: &quot;initial&quot;,
                    &quot;maximumWarning&quot;: &quot;10mb&quot;,
                    &quot;maximumError&quot;: &quot;20mb&quot;
                  },
                  {
                    &quot;type&quot;: &quot;anyComponentStyle&quot;,
                    &quot;maximumWarning&quot;: &quot;1mb&quot;
                  }
                ]
              }
            }
          },
          &quot;serve&quot;: {
            &quot;builder&quot;: &quot;@angular-builders/custom-webpack:dev-server&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;Sparkster-Visualizer:build&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;browserTarget&quot;: &quot;Visualizer:build:production&quot;
              }
            }
          },
          &quot;extract-i18n&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:extract-i18n&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;Visualizer:build&quot;
            }
          },
          &quot;test&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:karma&quot;,
            &quot;options&quot;: {
              &quot;main&quot;: &quot;src/test.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.spec.json&quot;,
              &quot;karmaConfig&quot;: &quot;karma.conf.js&quot;,
              &quot;codeCoverage&quot;: true,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;,
                {
                  &quot;glob&quot;: &quot;**/*&quot;,
                  &quot;input&quot;: &quot;node_modules/ngx-monaco-editor/assets/monaco&quot;,
                  &quot;output&quot;: &quot;./assets/monaco/&quot;
                }
              ],
              &quot;styles&quot;: [
                &quot;./node_modules/jquery-ui-dist/jquery-ui.css&quot;,
                &quot;./node_modules/bootstrap/dist/css/bootstrap.min.css&quot;,
                &quot;src/styles.css&quot;,
                &quot;./node_modules/font-awesome/css/font-awesome.css&quot;,
                &quot;./node_modules/jointjs/css/layout.css&quot;,
                &quot;./node_modules/jointjs/css/themes/material.css&quot;,
                &quot;./node_modules/jointjs/css/themes/default.css&quot;,
                &quot;./node_modules/datatables.net-dt/css/jquery.dataTables.css&quot;,
                &quot;./node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css&quot;,
                &quot;src/assets/rappid/css/rappid.min.css&quot;
              ],
              &quot;scripts&quot;: [
                &quot;./node_modules/jquery/dist/jquery.min.js&quot;,
                &quot;./node_modules/jquery-ui-dist/jquery-ui.min.js&quot;,
                &quot;./node_modules/bootstrap/dist/js/bootstrap.min.js&quot;,
                &quot;./node_modules/lodash/index.js&quot;,
                &quot;./node_modules/backbone/backbone.js&quot;,
                &quot;./node_modules/jointjs/dist/joint.js&quot;,
                &quot;./node_modules/datatables.net/js/jquery.dataTables.js&quot;,
                &quot;./node_modules/datatables.net-responsive/js/dataTables.responsive.js&quot;,
                &quot;src/assets/rappid/js/rappid.min.js&quot;,
                &quot;src/assets/rappid/js/joint.shapes.qad.js&quot;,
                &quot;src/assets/rappid/js/selection.js&quot;,
                &quot;src/assets/rappid/js/factory.js&quot;,
                &quot;src/assets/rappid/js/app.js&quot;
              ]
            }
          },
          &quot;lint&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
            &quot;options&quot;: {
              &quot;tsConfig&quot;: [
                &quot;tsconfig.app.json&quot;,
                &quot;tsconfig.spec.json&quot;,
                &quot;e2e/tsconfig.json&quot;
              ],
              &quot;exclude&quot;: [
                &quot;**/node_modules/**&quot;
              ]
            }
          },
          &quot;e2e&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:protractor&quot;,
            &quot;options&quot;: {
              &quot;protractorConfig&quot;: &quot;e2e/protractor.conf.js&quot;,
              &quot;devServerTarget&quot;: &quot;Visualizer:serve&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;devServerTarget&quot;: &quot;Visualizer:serve:production&quot;
              }
            }
          }
        }
      }
    },
    &quot;defaultProject&quot;: &quot;Visualizer&quot;,
    &quot;cli&quot;: {
      &quot;analytics&quot;: &quot;09642dda-3c7a-46ea-9b06-c0e47c550b1c&quot;
    }
  }
  </code></pre>