ng-alain15 micro1 ng add single-spa-angular

ng-alain15/micro1/angular.json

@@ -54,11 +54,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"
             ],
@@ -83,7 +83,13 @@
               "includePaths": [
                 "node_modules/"
               ]
-            }
+            },
+            "customWebpackConfig": {
+              "path": "extra-webpack.config.js",
+              "libraryName": "micro1",
+              "libraryTarget": "umd"
+            },
+            "deployUrl": "http://localhost:4201/"
           },
           "configurations": {
             "production": {
@@ -99,7 +105,7 @@
                   "maximumError": "4kb"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "none"
             },
             "development": {
               "buildOptimizer": false,
@@ -107,13 +113,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"

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

ng-alain15/micro1/package.json

@@ -18,7 +18,9 @@
     "prepare": "husky install",
     "lint": "npm run lint:ts && npm run lint:style",
     "lint:ts": "ng lint --fix",
-    "lint:style": "npx stylelint \"src/**/*.less\" --fix"
+    "lint:style": "npx stylelint \"src/**/*.less\" --fix",
+    "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": {
@@ -30,62 +32,66 @@
     "@angular/platform-browser": "^15.1.0",
     "@angular/platform-browser-dynamic": "^15.1.0",
     "@angular/router": "^15.1.0",
-    "ng-alain": "15.1.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.12.0",
     "@delon/abc": "^15.1.0",
     "@delon/acl": "^15.1.0",
     "@delon/auth": "^15.1.0",
     "@delon/cache": "^15.1.0",
+    "@delon/chart": "^15.1.0",
     "@delon/form": "^15.1.0",
     "@delon/mock": "^15.1.0",
     "@delon/theme": "^15.1.0",
     "@delon/util": "^15.1.0",
-    "@delon/chart": "^15.1.0",
+    "ng-alain": "15.1.0",
     "ng-zorro-antd": "^15.0.3",
-    "screenfull": "^6.0.2"
+    "rxjs": "~7.8.0",
+    "screenfull": "^6.0.2",
+    "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",
-    "@types/jasmine": "~4.3.0",
-    "jasmine-core": "~4.5.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "~4.9.4",
     "@angular-eslint/builder": "~15.2.0",
     "@angular-eslint/eslint-plugin": "~15.2.0",
     "@angular-eslint/eslint-plugin-template": "~15.2.0",
     "@angular-eslint/schematics": "~15.2.0",
     "@angular-eslint/template-parser": "~15.2.0",
+    "@angular/cli": "~15.1.6",
+    "@angular/compiler-cli": "^15.1.0",
+    "@angular/language-service": "^15.1.0",
+    "@delon/testing": "^15.1.0",
+    "@types/jasmine": "~4.3.0",
     "@typescript-eslint/eslint-plugin": "~5.49.0",
     "@typescript-eslint/parser": "~5.49.0",
     "eslint": "^8.33.0",
     "eslint-config-prettier": "~8.6.0",
+    "eslint-plugin-deprecation": "~1.3.3",
     "eslint-plugin-import": "~2.26.0",
     "eslint-plugin-jsdoc": "~39.7.4",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "eslint-plugin-prettier": "~4.2.1",
-    "eslint-plugin-deprecation": "~1.3.3",
-    "prettier": "^2.8.3",
     "husky": "^7.0.4",
+    "jasmine-core": "~4.5.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "lint-staged": "^13.1.0",
     "ng-alain": "^15.1.0",
     "ng-alain-plugin-theme": "^15.0.1",
+    "prettier": "^2.8.3",
     "source-map-explorer": "^2.5.3",
-    "@angular/language-service": "^15.1.0",
-    "@delon/testing": "^15.1.0",
-    "lint-staged": "^13.1.0",
+    "style-loader": "^3.3.1",
     "stylelint": "^14.16.1",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.6.0",
-    "stylelint-order": "^6.0.1"
+    "stylelint-order": "^6.0.1",
+    "typescript": "~4.9.4"
   },
   "lint-staged": {
     "(src)/**/*.{html,ts}": [

ng-alain15/micro1/src/app/empty-route/empty-route.component.ts

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

ng-alain15/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;

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

ng-alain15/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 & {};

ng-alain15/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

ng-alain15/micro1/yarn.lock

@@ -9275,6 +9275,13 @@ simple-statistics@^6.1.0:
   resolved "https://registry.npmmirror.com/simple-statistics/-/simple-statistics-6.1.1.tgz#e3a0799ffc49914d6f421c5a4ac585f6a13e2bad"
   integrity sha512-zGwn0DDRa9Zel4H4n2pjTFIyGoAGpnpjrGIctreCxj5XWrcx9v7Xy7270FkC967WMmcvuc8ZU7m0ZG+hGN7gAA==
 
+single-spa-angular@8.0.1:
+  version "8.0.1"
+  resolved "https://registry.npmmirror.com/single-spa-angular/-/single-spa-angular-8.0.1.tgz#dba27b1bf4a07524ae8f60478b105bddd2a1d60e"
+  integrity sha512-eK3sx/d4MdgZ+t5EeEyjpshhIP2/9lO+6mQV6I5hy9yhMEJJuG+Df4UCTMzz0oOPQ0YLAYw/Y4JId3+tXprXpg==
+  dependencies:
+    tslib "^2.3.0"
+
 slash@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"