fix mount multiple angular parcels with same config

apps/multiple-parcels-same-config/child/project.json

@@ -0,0 +1,77 @@
+{
+  "name": "multiple-parcels-same-config-child",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/multiple-parcels-same-config/child/src",
+  "prefix": "single-spa-angular",
+  "targets": {
+    "build": {
+      "executor": "@angular-builders/custom-webpack:browser",
+      "options": {
+        "customWebpackConfig": {
+          "libraryTarget": "system",
+          "excludeAngularDependencies": true,
+          "path": "apps/multiple-parcels-same-config/child/webpack.config.ts"
+        },
+        "outputPath": "dist/apps/multiple-parcels-same-config-child",
+        "index": "apps/multiple-parcels-same-config/child/src/index.html",
+        "main": "apps/multiple-parcels-same-config/child/src/main.single-spa.ts",
+        "tsConfig": "apps/multiple-parcels-same-config/child/tsconfig.app.json",
+        "aot": true,
+        "assets": ["apps/multiple-parcels-same-config/child/src/favicon.ico", "apps/multiple-parcels-same-config/child/src/assets"],
+        "styles": ["apps/multiple-parcels-same-config/child/src/styles.scss"],
+        "deployUrl": "http://localhost:9000/"
+      },
+      "configurations": {
+        "development": {
+          "buildOptimizer": false,
+          "optimization": false,
+          "vendorChunk": true,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "namedChunks": true
+        },
+        "production": {
+          "fileReplacements": [
+            {
+              "replace": "apps/multiple-parcels-same-config/child/src/environments/environment.ts",
+              "with": "apps/multiple-parcels-same-config/child/src/environments/environment.prod.ts"
+            }
+          ],
+          "optimization": true,
+          "outputHashing": "none",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false,
+          "buildOptimizer": true,
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "2mb",
+              "maximumError": "5mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "6kb",
+              "maximumError": "10kb"
+            }
+          ]
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-builders/custom-webpack:dev-server",
+      "options": {
+        "browserTarget": "multiple-parcels-same-config-child:build:development"
+      },
+      "configurations": {
+        "production": {
+          "browserTarget": "multiple-parcels-same-config-child:build:production"
+        }
+      }
+    }
+  },
+  "tags": []
+}

apps/multiple-parcels-same-config/child/src/app/app-routing.module.ts

@@ -0,0 +1,15 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { EmptyRouteComponent } from './empty-route/empty-route.component';
+
+const routes: Routes = [
+  { path: '**', component: EmptyRouteComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+  providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
+})
+export class AppRoutingModule { }

apps/multiple-parcels-same-config/child/src/app/app.component.html

@@ -0,0 +1,4 @@
+<div class="parcel-same-config">
+    <p>parcel name: {{props.name}}</p>
+    <p>time now is {{time}}</p>
+</div>

apps/multiple-parcels-same-config/child/src/app/app.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { singleSpaPropsSubject } from '../single-spa/single-spa-props';
+import { first } from 'rxjs';
+
+@Component({
+  selector: 'multiple-parcels-same-config-child',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  constructor() {}
+
+  props: any = null;
+  time: number = Date.now();
+
+  ngOnInit() {
+    singleSpaPropsSubject
+      .pipe(first())
+      .subscribe((props) => {
+        this.props = props;
+      });
+
+    setInterval(() => {
+      this.time = Date.now();
+    }, 1000);
+  }
+}

apps/multiple-parcels-same-config/child/src/app/app.module.ts

@@ -0,0 +1,21 @@
+import { ApplicationRef, DoBootstrap, NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { APP_BASE_HREF } from '@angular/common';
+
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+import { EmptyRouteComponent } from './empty-route/empty-route.component';
+
+export const AppModule = (name: string) => {
+  @NgModule({
+    declarations: [AppComponent, EmptyRouteComponent],
+    imports: [BrowserAnimationsModule, AppRoutingModule],
+    providers: [],
+  })
+  class AppModule implements DoBootstrap {
+    ngDoBootstrap(appRef: ApplicationRef) {
+      appRef.bootstrap(AppComponent, `multiple-parcels-same-config-child-${name}`);
+    }
+  }
+  return AppModule;
+}

apps/multiple-parcels-same-config/child/src/app/empty-route/empty-route.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app1-empty-route',
+  template: '',
+})
+export class EmptyRouteComponent {}

apps/multiple-parcels-same-config/child/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};

apps/multiple-parcels-same-config/child/src/environments/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: false,
+};

apps/multiple-parcels-same-config/child/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>AngularMultipleParcelsSameConfigChild</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <multiple-parcels-same-config-child-root></multiple-parcels-same-config-child-root>
+  </body>
+</html>

apps/multiple-parcels-same-config/child/src/main.single-spa.ts

@@ -0,0 +1,31 @@
+import { NgZone } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { NavigationStart, Router } from '@angular/router';
+import { singleSpaAngular, getSingleSpaExtraProviders, enableProdMode } 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(getSingleSpaExtraProviders()).bootstrapModule(
+      AppModule(singleSpaProps.name)
+    );
+  },
+  template: singleSpaProps => {
+    return `<multiple-parcels-same-config-child-${singleSpaProps.name} />`;
+  },
+  NgZone,
+  Router,
+  NavigationStart,
+});
+
+export const bootstrap = lifecycles.bootstrap;
+export const mount = lifecycles.mount;
+export const unmount = lifecycles.unmount;

apps/multiple-parcels-same-config/child/src/single-spa/asset-url.ts

@@ -0,0 +1,12 @@
+// In single-spa, the assets need to be loaded from a dynamic location,
+// instead of hard coded to `/assets`. We use webpack public path for this.
+// See https://webpack.js.org/guides/public-path/#root
+
+export function assetUrl(url: string): string {
+  // @ts-ignore
+  const publicPath = __webpack_public_path__;
+  const publicPathSuffix = publicPath.endsWith('/') ? '' : '/';
+  const urlPrefix = url.startsWith('/') ? '' : '/';
+
+  return `${publicPath}${publicPathSuffix}assets${urlPrefix}${url}`;
+}

apps/multiple-parcels-same-config/child/src/single-spa/single-spa-props.ts

@@ -0,0 +1,8 @@
+import { ReplaySubject } from 'rxjs';
+import { AppProps } from 'single-spa';
+
+export const singleSpaPropsSubject = new ReplaySubject<SingleSpaProps>(1);
+
+// Add any custom single-spa props you have to this type def
+// https://single-spa.js.org/docs/building-applications.html#custom-props
+export type SingleSpaProps = AppProps & Record<string, unknown>;

apps/multiple-parcels-same-config/child/src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

apps/multiple-parcels-same-config/child/tsconfig.app.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "files": ["src/main.single-spa.ts"]
+}

apps/multiple-parcels-same-config/child/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "compilerOptions": {
+    "target": "es2020"
+  }
+}

apps/multiple-parcels-same-config/child/webpack.config.ts

@@ -0,0 +1 @@
+export { default } from '../../../libs/single-spa-angular/webpack';

apps/multiple-parcels-same-config/parent/project.json

@@ -0,0 +1,77 @@
+{
+  "name": "multiple-parcels-same-config",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/multiple-parcels-same-config/parent/src",
+  "prefix": "single-spa-angular",
+  "targets": {
+    "build": {
+      "executor": "@angular-builders/custom-webpack:browser",
+      "options": {
+        "customWebpackConfig": {
+          "libraryTarget": "system",
+          "excludeAngularDependencies": true,
+          "path": "apps/multiple-parcels-same-config/parent/webpack.config.ts"
+        },
+        "outputPath": "dist/apps/multiple-parcels-same-config",
+        "index": "apps/multiple-parcels-same-config/parent/src/index.html",
+        "main": "apps/multiple-parcels-same-config/parent/src/main.single-spa.ts",
+        "tsConfig": "apps/multiple-parcels-same-config/parent/tsconfig.app.json",
+        "aot": true,
+        "assets": ["apps/multiple-parcels-same-config/parent/src/favicon.ico", "apps/multiple-parcels-same-config/parent/src/assets"],
+        "styles": ["apps/multiple-parcels-same-config/parent/src/styles.scss"],
+        "deployUrl": "http://localhost:9000/"
+      },
+      "configurations": {
+        "development": {
+          "buildOptimizer": false,
+          "optimization": false,
+          "vendorChunk": true,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "namedChunks": true
+        },
+        "production": {
+          "fileReplacements": [
+            {
+              "replace": "apps/multiple-parcels-same-config/parent/src/environments/environment.ts",
+              "with": "apps/multiple-parcels-same-config/parent/src/environments/environment.prod.ts"
+            }
+          ],
+          "optimization": true,
+          "outputHashing": "none",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false,
+          "buildOptimizer": true,
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "2mb",
+              "maximumError": "5mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "6kb",
+              "maximumError": "10kb"
+            }
+          ]
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-builders/custom-webpack:dev-server",
+      "options": {
+        "browserTarget": "multiple-parcels-same-config:build:development"
+      },
+      "configurations": {
+        "production": {
+          "browserTarget": "multiple-parcels-same-config:build:production"
+        }
+      }
+    }
+  },
+  "tags": []
+}

apps/multiple-parcels-same-config/parent/src/app/app-routing.module.ts

@@ -0,0 +1,15 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { EmptyRouteComponent } from './empty-route/empty-route.component';
+
+const routes: Routes = [
+  { path: '**', component: EmptyRouteComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+  providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
+})
+export class AppRoutingModule { }

apps/multiple-parcels-same-config/parent/src/app/app.component.html

@@ -0,0 +1,14 @@
+<button class="mount1" (click)="mount1()">Mount 1</button>
+<button class="mount2" (click)="mount2()">Mount 2</button>
+<button class="unmount1" (click)="unmount1()">Unmount 1</button>
+<button class="unmount2" (click)="unmount2()">Unmount 2</button>
+
+<div>
+    parcel 1
+    <div style="height: 100px; background-color: red;" #parcelContainer1>
+    </div>
+
+    parcel 2
+    <div style="height: 100px; background-color: green;" #parcelContainer2>
+    </div>
+</div>