angular15-hash micro1 ng add single-spa-angular

angular15-hash/micro1/angular.json

@@ -11,11 +11,11 @@
       "prefix": "micro1",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
             "outputPath": "dist/micro1",
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "main": "src/main.single-spa.ts",
             "polyfills": [
               "zone.js"
             ],
@@ -27,7 +27,13 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "customWebpackConfig": {
+              "path": "extra-webpack.config.js",
+              "libraryName": "micro1",
+              "libraryTarget": "umd"
+            },
+            "deployUrl": "http://localhost:4201/"
           },
           "configurations": {
             "production": {
@@ -43,7 +49,7 @@
                   "maximumError": "4kb"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "none"
             },
             "development": {
               "buildOptimizer": false,
@@ -51,13 +57,14 @@
               "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
-              "namedChunks": true
+              "namedChunks": true,
+              "outputHashing": "none"
             }
           },
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "configurations": {
             "production": {
               "browserTarget": "micro1:build:production"

angular15-hash/micro1/extra-webpack.config.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;
+};

angular15-hash/micro1/package.json

@@ -6,7 +6,9 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "build:single-spa:micro1": "ng build micro1 --configuration production",
+    "serve:single-spa:micro1": "ng s --project micro1 --disable-host-check --port 4201 --live-reload false"
   },
   "private": true,
   "dependencies": {
@@ -19,10 +21,13 @@
     "@angular/platform-browser-dynamic": "^15.1.0",
     "@angular/router": "^15.1.0",
     "rxjs": "~7.8.0",
+    "single-spa": ">=4.0.0",
+    "single-spa-angular": "^8.0.1",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"
   },
   "devDependencies": {
+    "@angular-builders/custom-webpack": "15.0.0",
     "@angular-devkit/build-angular": "^15.1.6",
     "@angular/cli": "~15.1.6",
     "@angular/compiler-cli": "^15.1.0",
@@ -33,6 +38,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
+    "style-loader": "^3.3.1",
     "typescript": "~4.9.4"
   }
-}
+}
\ No newline at end of file

angular15-hash/micro1/src/app/empty-route/empty-route.component.ts

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

angular15-hash/micro1/src/main.single-spa.ts

+import { enableProdMode, NgZone } from '@angular/core';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { Router, NavigationStart } from '@angular/router';
+
+import { singleSpaAngular, getSingleSpaExtraProviders } 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);
+  },
+  template: '<micro1-root />',
+  Router,
+  NavigationStart,
+  NgZone,
+});
+
+export const bootstrap = lifecycles.bootstrap;
+export const mount = lifecycles.mount;
+export const unmount = lifecycles.unmount;

angular15-hash/micro1/src/single-spa/asset-url.ts

+// 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}`;
+}

angular15-hash/micro1/src/single-spa/single-spa-props.ts

+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 & {};

angular15-hash/micro1/tsconfig.app.json

-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
@@ -6,9 +5,9 @@
     "types": []
   },
   "files": [
-    "src/main.ts"
+    "src/main.single-spa.ts"
   ],
   "include": [
     "src/**/*.d.ts"
   ]
-}
+}
\ No newline at end of file