wip3 for multi-version-ng code demo

Author: edumserrano

code-demos/multi-version-ng/README.md

@@ -14,7 +14,10 @@ code-demos\multi-version-ng\mfe3-ng12\tsconfig.json -> resolveJsonModule and all
 webpack.config.js files -> talk about the diffs, different ng versions have differnt setups. More importantly is the share bit
 
 
-code-demos\multi-version-ng\mfe3-ng12\package.json -> start:local-web-component
+code-demos\multi-version-ng\mfe3-ng12\package.json -> "start:mfe": "ng serve --configuration mfe"
+
+
+code-demos\multi-version-ng\mfe3-ng12\src\bootstrap.ts -> talk about bootstrapModule
 
 
 code-demos\multi-version-ng\mfe3-ng12\src\app\my-feature\remote-bootstrap.ts -> bootstrapMyComponentAsyncV2
@@ -40,4 +43,8 @@ code-demos\multi-version-ng\mfe3-ng12\src\app\app.module.ts
 // Because of this we don't add anything to the boostrap array and we do some logic in the ngDoBootstrap function which gets called if the bootstrap array is empty (check this, link to article).
 
 
-Maybe change the ngDoBootstrap signature to take in the appref? What makes more sense? check docs on bgDoBootstrap overloads?
+Maybe change the ngDoBootstrap signature to take in the appref? What makes more sense? check docs on bgDoBootstrap overloads?
+
+
+add note about using `npm i -D @angular-architects/module-federation-tools@appropriate-version`: "@angular-architects/module-federation-tools": "^16.0.4",
+instead of the custom platform bootstrap, note that the same custom platform bootstrap is used on the remote bootstrap file

code-demos/multi-version-ng/mfe1-ng16/package-lock.json

@@ -20,7 +20,6 @@
   },
   "devDependencies": {
     "@angular-architects/module-federation": "^16.0.4",
-    "@angular-architects/module-federation-tools": "^16.0.4",
     "@angular-devkit/build-angular": "^16.1.4",
     "@angular/cli": "~16.1.4",
     "@angular/compiler-cli": "^16.1.0",

code-demos/multi-version-ng/mfe1-ng16/package.json

@@ -20,7 +20,6 @@
   },
   "devDependencies": {
     "@angular-architects/module-federation": "^14.0.0",
-    "@angular-architects/module-federation-tools": "^16.0.4",
     "@angular-devkit/build-angular": "^14.2.12",
     "@angular/cli": "~14.2.12",
     "@angular/compiler-cli": "^14.2.0",

code-demos/multi-version-ng/mfe2-ng14/package-lock.json

@@ -58,6 +58,20 @@
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
+            },
+            "mfe": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.mfe.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"
@@ -71,6 +85,9 @@
             },
             "development": {
               "browserTarget": "mfe3-ng12:build:development"
+            },
+            "mfe": {
+              "browserTarget": "mfe3-ng12:build:mfe"
             }
           },
           "defaultConfiguration": "development",

code-demos/multi-version-ng/mfe2-ng14/package.json

@@ -2,7 +2,8 @@
   "name": "mfe3-ng12",
   "version": "0.0.0",
   "scripts": {
-    "start": "ng serve"
+    "start": "ng serve",
+    "start:mfe": "ng serve --configuration mfe"
   },
   "private": true,
   "dependencies": {

code-demos/multi-version-ng/mfe3-ng12/angular.json

@@ -2,12 +2,17 @@ import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { environment } from './environments/environment';
 import { DevPlatformModule } from './dev-platform/dev-platform.module';
+import { MfePlatformModule } from './mfe-platform/mfe-platform.module';
 
 if (environment.production) {
   enableProdMode();
 }
 
+const bootstrapModule = environment.runMfePlatform
+  ? MfePlatformModule
+  : DevPlatformModule;
+
 platformBrowserDynamic()
-  .bootstrapModule(DevPlatformModule)
+  .bootstrapModule(bootstrapModule)
   .catch((err) => console.error(err));
 

code-demos/multi-version-ng/mfe3-ng12/package.json

@@ -1,4 +1,4 @@
 export const environment = {
   production: false,
-  bootstrapWebComponent: true,
+  runMfePlatform: true,
 };

code-demos/multi-version-ng/mfe3-ng12/src/bootstrap.ts

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

code-demos/multi-version-ng/mfe3-ng12/src/environments/environment.local-web-component.ts code-demos/multi-version-ng/mfe3-ng12/src/environments/environment.mfe.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  runMfePlatform: false,
 };
 
 /*

code-demos/multi-version-ng/mfe3-ng12/src/environments/environment.prod.ts

@@ -8,7 +8,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <app-root></app-root>
-  <mfe3-element></mfe3-element>
+  <app-root></app-root> <!-- this is the root element used by the DevPlatformModule -->
+  <mfe3-element></mfe3-element> <!-- this is the root element used by the MfePlatformModule -->
 </body>
 </html>

code-demos/multi-version-ng/mfe3-ng12/src/environments/environment.ts

@@ -47,13 +47,7 @@
               "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
-              "namedChunks": true,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.development.ts"
-                }
-              ]
+              "namedChunks": true
             }
           },
           "defaultConfiguration": "production"

code-demos/multi-version-ng/mfe3-ng12/src/index.html

@@ -20,7 +20,6 @@
   },
   "devDependencies": {
     "@angular-architects/module-federation": "^16.0.4",
-    "@angular-architects/module-federation-tools": "^16.0.4",
     "@angular-devkit/build-angular": "^16.1.4",
     "@angular/cli": "~16.1.4",
     "@angular/compiler-cli": "^16.1.0",

code-demos/multi-version-ng/shell-ng16/angular.json

@@ -1,10 +1,5 @@
 import { PlatformRef } from '@angular/core';
 import { AppModule } from './app/app.module';
-// import { environment } from './environments/environment';
-// import {
-//   Options,
-//   bootstrap,
-// } from '@angular-architects/module-federation-tools';
 import { platformBrowser } from '@angular/platform-browser';
 import packageJson from '../package.json';
 // import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -13,12 +8,6 @@ import packageJson from '../package.json';
 //   .bootstrapModule(AppModule)
 //   .catch((err) => console.error(err));
 
-// const bootstrapOptions: Options = {
-//   production: environment.production,
-//   appType: "shell",
-// };
-// bootstrap(AppModule, bootstrapOptions)
-
 const platform = getAngularPlatform();
 platform.bootstrapModule(AppModule);