All code changes from no microfrontends to microfrontends with web components (directly from the video)

README.md

@@ -11,6 +11,19 @@ $ npm start
 
 A visit to `localhost:4200` shows the application.
 
+## Bookings local development
+
+Serve the bookings microfrontend inside the train-platform application (does not support live-reload for microfrontend):
+```
+npm start train-platform
+npm run ng run bookings:build:local-web-components && npx http-server projects/bookings/dist --port 4201
+```
+
+Serve the bookings microfrontend in isolation using the angular dev server:
+```
+npm start bookings
+```
+
 ## Benefits of microfrontends
 
 - Vertical services (backend and frontend are fully owned by one team, see [micro-frontends.org](https://micro-frontends.org/))

angular.json

@@ -29,7 +29,9 @@
               "projects/train-platform/src/favicon.ico",
               "projects/train-platform/src/assets"
             ],
-            "styles": ["projects/train-platform/src/styles.css"],
+            "styles": [
+              "projects/train-platform/src/styles.css"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -72,7 +74,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "train-platform:build"
+            "browserTarget": "train-platform:build",
+            "proxyConfig": "proxy.conf.json"
           },
           "configurations": {
             "production": {
@@ -96,7 +99,137 @@
           }
         }
       }
+    },
+    "bookings": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "inlineTemplate": true,
+          "inlineStyle": true,
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "projects/bookings",
+      "sourceRoot": "projects/bookings/src",
+      "prefix": "mf",
+      "architect": {
+        "build": {
+          "builder": "ngx-build-plus:build",
+          "options": {
+            "singleBundle": true,
+            "outputHashing": "none",
+            "outputPath": "projects/bookings/dist",
+            "index": "projects/bookings/src/index.html",
+            "main": "projects/bookings/src/main.ts",
+            "polyfills": "projects/bookings/src/polyfills.ts",
+            "tsConfig": "projects/bookings/tsconfig.app.json",
+            "aot": true,
+            "buildOptimizer": false,
+            "optimization": false,
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "sourceMap": true,
+            "namedChunks": true,
+            "assets": [
+              "projects/bookings/src/favicon.ico",
+              "projects/bookings/src/assets"
+            ],
+            "styles": [
+              "projects/bookings/src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                },
+                "fonts": false
+              },
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "projects/bookings/src/environments/environment.ts",
+                  "with": "projects/bookings/src/environments/environment.prod.ts"
+                }
+              ]
+            },
+            "local-web-components": {
+              "fileReplacements": [
+                {
+                  "replace": "projects/bookings/src/environments/environment.ts",
+                  "with": "projects/bookings/src/environments/environment.local-web-components.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "bookings:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "bookings:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "bookings:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/bookings/**/*.ts",
+              "projects/bookings/**/*.html"
+            ]
+          }
+        }
+      }
     }
   },
   "defaultProject": "train-platform"
-}
+}