joeldenning/simple-single-spa-webpack-example

A simple example of how to use webpack with single-spa

simple-single-spa-webpack-example

A simple example of how to use webpack with single-spa. Check out the docs and the guide to learn more about single-spa itself.

This repository hopefully will be helpful for starting your own single-spa project. It has a react application and an angular application coexisting in a minimalistic way. If this project turns out to be helpful to people, I can add some more documentation, comments in the code, etc.

How to use it

1. Clone this project
2. yarn install (or npm install)
3. yarn watch (or npm run watch)
4. Open up http://localhost:8080 in a web browser.

simple-single-spa-webpack-example's Issues

Compilation issue due to missing angular module

@angular/platform-browser-dynamic is missing from the package.json

ERROR in ./src/app2/app2.js
Module not found: Error: Can't resolve '@angular/platform-browser-dynamic' in 'E:\workspace\simple-single-spa-webpack-example\src\app2'
@ ./src/app2/app2.js 18:30-74
@ ./src/root-application/root-application.js

Error with Webpack 4

I tried to simulate a Single-SPA with Webpack 4, however the exemple and what I did manually based on this repository return error in import.

./src/root-application/root-application.js
Module build failed: SyntaxError: Unexpected token (4:4)

  2 | 
  3 | singleSpa.registerApplication('app-1', () =>
> 4 |     import ('../app1/app1.js'), pathPrefix('/app1'));
    |     ^
  5 | 
  6 | singleSpa.start();
  7 | 

 @ multi (webpack)-dev-server/client?http://localhost:3333 src/root-application/root-application.js

Add support for IE11

Currently this sample fails on IE11 due to missing polyfills.

getting an error while building the project

Hi,

I really liked the concept and the documentation of single-spa, great project.

I want to start exploring the project so i have cloned "simple-single-spa-webpack-example" and run "npm install" successfully, but when i run "npm run build" I am getting the following error:

ERROR in ./src/app2/main-module.ts
Module not found: Error: Can't resolve './app2.component' in 'C:\Dev\POC\micro frontend\single-spa\simple-single-spa-webpack-example\src\app2'
 @ ./src/app2/main-module.ts 11:23-50
 @ ./src/app2/app2.js
 @ ./src/root-application/root-application.js

have any idea how to solve it? (I am using windows 7)

Thanks, and keep the good job you are doing with this project 👍

Unable to switch between multiple angular apps

i am trying to load multiple angular apps (1.x, 4, 6 versions) using single-spa framework.

registerApplication('app1', () => loadApp('index.html path') , pathPrefix('/app1'));
registerApplication('app2', () => loadApp('index.html path') , pathPrefix('/app2'));

function loadApp(url) {
return new Promise((resolve, reject) => {

  //load all polyfills, vendor, main js files

   var script = document.createElement("script");
   script.type = "text/javascript";
   script.src = "polyfills-bundl.js";  
   document.head.appendChild(script);

});
}

app1 loads successfully, if i try to load 'app2' it doesn't work. it is the same way for app2.

Can you please help me what is the issue here?

Does single-spa-webpack-example supports to load different angular version apps?

Why not dependencies in externals of webpack

By going through webpack config, I understand that you are optimizing dependencies by applying split chunks on it. If you don't mention those dependencies in external, won't they be re-fetched for each micro-app and also, why adding them in entry point.

Just trying to understand the purpose of the code, the way it is written.

multiple angular apps are not working when enableProdMode is in place

When using multiple angular apps with enableProdMode only first angular app works, on clicking next one, there is error in console "app died in status loading_source_code: cannot enable prod mode after platform setup". Even after build step same thing is happening. But without enableProdMode everything is fine and there is no issue (atleast in dev mode)

Do you recommend developing the seperate micro-spas in a monorepo, perhaps lerna?

In your webpack example, the apps are all in one repo. I feel that this would have some benefits for integration. Lerna could potentially handle library dependency headaches that arise from multiple runtimes all needing to target a new dependency they share.

Any learnings from you guys on this?

Unable to use two versions of Angular2

If I understand properly, based on this setup, since I only have one package.json, I can't run two angular app, running two similar versions of Angular at the same time. I have dozens of internal Angular app, all maintained separately, all running version of Angular between 2 and 4, that I am trying to show on one screen (not all at the same time) without using Iframes. They are all running on different web server (I will proxy them thru one server), have their own dependencies and framework version, and I would like to keep the ability to be able to deploy them independently. Something this Single-SPA framework can tackle?

Webpack support with Angular 1.4 code

HI @joeldenning ,

I'm using Angular 1.4 code( ES5 ) , using webpack as build tool.
'm not able to export bootstrap, unmount and mount functions.
Here is my code which is in entry file.

var jsSingle = require('single-spa-angularjs');
var angular = require('angular');
var ngLifecycles = jsSingle.default({
  angular: angular,
  mainAngularModule: 'emp',
  uiRouter: true,
  preserveGlobal: false,
});

var bootstrap = ngLifecycles.bootstrap;
var mount = ngLifecycles.mount;
var unmount = ngLifecycles.unmount;

How do i export those bootstrap, unmount and mount functions?

please help.

React single spa

@joeldenning

ERROR --> Uncaught Error: app3 died in status LOADING_SOURCE_CODE: "does not export an unmount function or array of functions"

code: This runs fine if I don't use the bundled .js file app3.bd.js.
app1.js and app2.js are just like in this example of simple-single-spa-webpack-example.

However, app3.bd.js is bundled and copied in the folder

import * as singleSpa from 'single-spa';
import "core-js/stable";
import "regenerator-runtime/runtime";
import 'babel-polyfill';

async function registerApps(){
	const loadingPromises = [];
	loadingPromises.push(singleSpa.registerApplication('app1', () =>  import('./apps/app1/app1.js'), () => true));

	loadingPromises.push(singleSpa.registerApplication('app2', () =>  import('./apps/app2/app2.js'), () => location.pathname === "" || location.pathname === "/"));

	loadingPromises.push(singleSpa.registerApplication('app3', () => import('./apps/app3.bd.js'), pathPrefix('/app3')));

	await Promise.all(loadingPromises);
	singleSpa.start();
}

function pathPrefix(prefix) {
	return function(location) {
		return location.pathname.indexOf(`${prefix}`) === 0;
	}
}

// Register the apps
registerApps();

unable to get Angular1 component to load in this webpack example

Hi, I used a angular 1 component (copd it from simple-spa-examples) and add angular1 + router dependencies to package.json. And although the code builds and loads (I see it go into boostrap), the components don't seem to load. Are angular 1 + webpack + single spa supposed to work together or does single spa need systemJs?

How to register Angular lazy loaded modules

When using registerApplication method from single-spa, where are we informing it about the lazy loaded bundle (for Angular app). Let's say I have a different repo for angular micro frontend. Prod build gives me 2 bundles - main.js & lazy.js, While registering app in shell app I'm referencing main.js bundle. What will happen to lazy.js. How would single-spa come to know about other bundle which has to be lazily loaded ?

how to add a vue app??

<template>
  <div>
    App 3 is working
    <p>comment me on and off to see HMR</p>
  </div>
</template>
<script>
export default {
    create(){
        console.log('vue===========================')
    }
}
</script>>

// app3.js
import './set-public-path';
import Vue from 'vue';
import App from './App.vue';
import singleSpaVue from 'single-spa-vue';
const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    render: h => h(App),
    el: '#app3',
  },
});
export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

// set-public-path.js
import { setPublicPath } from 'systemjs-webpack-interop'
setPublicPath('app3')

and

import * as singleSpa from 'single-spa';

singleSpa.registerApplication('app-1', () =>
  import ('../app1-react/app1.js'), pathPrefix('/app1'));
singleSpa.registerApplication('app-2', () =>
  import ('../app2-ag/app2.js'), pathPrefix('/app2'));
singleSpa.registerApplication('app-3', () =>
  import ('../app3-vue/app3.js'), pathPrefix('/app3'));
singleSpa.start();

function pathPrefix(prefix) {
  return function(location) {
    return location.pathname.startsWith(`${prefix}`);
  }
}

end error:

Uncaught Error: 'app-3' died in status LOADING_SOURCE_CODE: systemjs-webpack-interop: There is no such module 'app3' in the SystemJS registry. Did you misspell the name of your module?

Support for lazy loading of dependent libraries

Is there a way to update or create another version of this example that allows for the dependencies to be lazy loaded (if not available). Ideally the react/angular framework would not be loaded at startup but rather only when that route is selected.

Based on the recommendations from the single-spa documentation (as I understand it) each application should also have it's own packaging.

webpack.prod.js

Thanks for creating this awesome example.
Just wondering. Do you also have a webpack configuration for production?
Are you able to extract common node modules among these sub-apps?

this prooject can`t use the 'yarn install' directive

but can be used npm run install

Support angular 7

I tried to run the example with updated angular version (v7 instead of v4) and got multiple errors.
At the end, I was able to fix them with the setup below. So if someone needs a working example: here are two basic changes:

1. in webpack.config.js comment out a deprecated plugin:
   new webpack.optimize.CommonsChunkPlugin({: 'common-dependencies', }),
2. use the following package.json:

{
"name": "simple-single-spa-webpack-example",
"version": "1.0.0",
"description": "A simple example of how to use webpack with single-spa",
"scripts": {
"watch": "webpack-dev-server --open",
"build": "webpack --config webpack.config.js -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/joeldenning/simple-single-spa-webpack-example.git"
},
"author": "Joel Denning",
"license": "MIT",
"bugs": {
"url": "https://github.com/joeldenning/simple-single-spa-webpack-example/issues"
},
"homepage": "https://github.com/joeldenning/simple-single-spa-webpack-example#readme",
"devDependencies": {
"@angular-devkit/build-angular": "^0.13.1",
"@angular/cli": "^7.3.1",
"@angular/compiler-cli": "^7.2.4",
"@angular/language-service": "^7.2.4",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"http-server": "^0.10.0",
"ts-loader": "^5.3.3",
"typescript": "^3.3.3",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"@angular/animations": "^7.2.4",
"@angular/common": "^7.2.4",
"@angular/compiler": "^7.2.4",
"@angular/core": "^7.2.4",
"@angular/forms": "^7.2.4",
"@angular/http": "^7.2.4",
"@angular/platform-browser": "^7.2.4",
"@angular/platform-browser-dynamic": "^7.2.4",
"@angular/platform-server": "^7.2.4",
"@angular/router": "^7.2.4",
"ajv": "^6.8.1",
"core-js": "^2.6.4",
"es6-promise": "^4.1.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"reflect-metadata": "^0.1.10",
"rxjs": "^6.4.0",
"rxjs-compat": "^6.4.0",
"single-spa": "^3.8.1",
"single-spa-angular2": "^1.2.0",
"single-spa-react": "^2.2.0",
"zone.js": "^0.8.29"
}
}

Cannot load App2

When I click on App2, nothing happens. I see this on the console:

single-spa-angular.js:60 Uncaught ReferenceError: props is not defined
    at single-spa-angular.js:60
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889

'app-1' died in status LOADING_SOURCE_CODE: single-spa-angular must be passed opts.mainModule, which is the Angular module to bootstrap

Hello,
I had created micro front application with two apps angular 5 and angular js. I had used one webpack to compile the code, as entry i created a main js referring to a root js file in which i registred the two apps successfully. Also i added two js file in each app with the lifecycle function.
The result is when i change the root to access one of the two apps i had the error
'app-1' died in status LOADING_SOURCE_CODE: single-spa-angular must be passed opts.mainModule, which is the Angular module to bootstrap

Problem executing the example

hi there,

got this error when i click the app2 link

Chromium:
Unhandled Promise rejection: props is not defined ; Zone: ; Task: Promise.then ; Value: ReferenceError: props is not defined
at single-spa-angular.js:60
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at zone.js:889
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601) ReferenceError: props is not defined
at http://localhost:8080/dist/common-dependencies.js.js:88280:56
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:8080/dist/common-dependencies.js.js:89228:26)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:8080/dist/common-dependencies.js.js:88987:43)
at http://localhost:8080/dist/common-dependencies.js.js:89726:34
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:8080/dist/common-dependencies.js.js:89260:31)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:8080/dist/common-dependencies.js.js:89032:47)
at drainMicroTaskQueue (http://localhost:8080/dist/common-dependencies.js.js:89438:35)
api.onUnhandledError @ zone.js:682
handleUnhandledRejection @ zone.js:709
_loop_1 @ zone.js:699
api.microtaskDrainDone @ zone.js:703
drainMicroTaskQueue @ zone.js:608
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
ZoneAwarePromise.then @ zone.js:1012
bootstrap @ single-spa-angular.js:58
bootstrap @ app2.js:19
i @ single-spa.js:1
(anonymous) @ single-spa.js:1
ZoneAwarePromise @ zone.js:910
(anonymous) @ single-spa.js:1
(anonymous) @ single-spa.js:1
r @ single-spa.js:1
(anonymous) @ single-spa.js:1
t.(anonymous function) @ single-spa.js:1
r @ single-spa.js:1
(anonymous) @ single-spa.js:1
e @ single-spa.js:1
(anonymous) @ single-spa.js:1
(anonymous) @ single-spa.js:1
Promise.then (async)
(anonymous) @ single-spa.js:1
(anonymous) @ single-spa.js:1
r @ single-spa.js:1
(anonymous) @ single-spa.js:1
t.(anonymous function) @ single-spa.js:1
r @ single-spa.js:1
(anonymous) @ single-spa.js:1
e @ single-spa.js:1
(anonymous) @ single-spa.js:1
(anonymous) @ single-spa.js:1
o @ single-spa.js:1
window.history.pushState @ single-spa.js:1
r @ single-spa.js:1
onclick @ (index):59
single-spa-angular.js:60 Uncaught ReferenceError: props is not defined
at single-spa-angular.js:60
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at zone.js:889
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
(anonymous) @ single-spa-angular.js:60
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
(anonymous) @ zone.js:889
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
drainMicroTaskQueue @ zone.js:601
setTimeout (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
r @ single-spa.js:1
(anonymous) @ single-spa.js:1
r @ single-spa.js:1
(anonymous) @ single-spa.js:1
t.(anonymous function) @ single-spa.js:1
r @ single-spa.js:1
(anonymous) @ single-spa.js:1
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
(anonymous) @ zone.js:889
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
drainMicroTaskQueue @ zone.js:601
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
resolvePromise @ zone.js:825
(anonymous) @ zone.js:741
Promise.then (async)
(anonymous) @ zone.js:1092
ZoneAwarePromise @ zone.js:910
Ctor.then @ zone.js:1091
r @ single-spa.js:1
(anonymous) @ single-spa.js:1
e @ single-spa.js:1
(anonymous) @ single-spa.js:1
(anonymous) @ single-spa.js:1
Promise.then (async)
(anonymous) @ single-spa.js:1
(anonymous) @ single-spa.js:1
r @ single-spa.js:1
(anonymous) @ single-spa.js:1
t.(anonymous function) @ single-spa.js:1
r @ single-spa.js:1
(anonymous) @ single-spa.js:1
e @ single-spa.js:1
(anonymous) @ single-spa.js:1
(anonymous) @ single-spa.js:1
o @ single-spa.js:1
window.history.pushState @ single-spa.js:1
r @ single-spa.js:1
onclick @ (index):59

Firefox:
ReferenceError: props is not defined[Learn More] common-dependencies.js.js:88280:5
bootstrap/< http://localhost:8080/dist/common-dependencies.js.js:88280:5
["./node_modules/zone.js/dist/zone.js"]/</</ZoneDelegate.prototype.invoke http://localhost:8080/dist/common-dependencies.js.js:89228:17
["./node_modules/zone.js/dist/zone.js"]/</</Zone.prototype.run http://localhost:8080/dist/common-dependencies.js.js:88987:24
scheduleResolveOrReject/< http://localhost:8080/dist/common-dependencies.js.js:89726:29
["./node_modules/zone.js/dist/zone.js"]/</</ZoneDelegate.prototype.invokeTask http://localhost:8080/dist/common-dependencies.js.js:89260:17
["./node_modules/zone.js/dist/zone.js"]/</</Zone.prototype.runTask http://localhost:8080/dist/common-dependencies.js.js:89032:28
drainMicroTaskQueue http://localhost:8080/dist/common-dependencies.js.js:89438:25
["./node_modules/core-js/client/shim.min.js"]/</</R/</n http://localhost:8080/dist/common-dependencies.js:58530:3508
["./node_modules/core-js/client/shim.min.js"]/</</R/< http://localhost:8080/dist/common-dependencies.js:58530:3653
["./node_modules/core-js/client/shim.min.js"]/</</t.exports/t http://localhost:8080/dist/common-dependencies.js:58528:27620

Support angular router lazy load module

angular lazy load module like loadChildren

const appRoutes: Routes = [
  {
    path: 'subroute1',
    component: Subroute1
  },
  {
    path: 'subroute2',
    component: Subroute2
  },
  {
    path: 'subroute3',
    loadChildren: './subroute3.module#SubRoute3Module'
  }
];