fix(angular): support module syntax for mfes (nrwl#8020)

* fix(angular): support module syntax for mfes * fix(angular): add publich host to prevent infinte reload
gxxcastillo · Dec 9, 2021 · 6e40032 · 6e40032
1 parent 366c2f0
commit 6e40032
Show file tree

Hide file tree

Showing 9 changed files with 932 additions and 9 deletions.
diff --git a/packages/angular/migrations.json b/packages/angular/migrations.json
@@ -126,6 +126,12 @@
       "version": "13.2.0",
       "description": "In Angular version 13, the `teardown` flag in `TestBed` will be enabled by default. This migration automatically opts out existing apps from the new teardown behavior.",
       "factory": "./src/migrations/update-13-2-0/opt-out-testbed-teardown"
+    },
+    "update-mfe-config-to-module-syntax": {
+      "cli": "nx",
+      "version": "13.3.0-beta.0",
+      "description": "In Angular version 13, the ESM became a first class citizen. This means the webpack config generated must be modified to support modules.",
+      "factory": "./src/migrations/update-13-3-0/update-mfe-webpack-config"
     }
   },
   "packageJsonUpdates": {

diff --git a/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap
@@ -32,6 +32,9 @@ module.exports = {
     runtimeChunk: false,
     minimize: false,
   },
+  experiments: {
+    outputModule: true
+  },
   resolve: {
     alias: {
       ...sharedMappings.getAliases(),
@@ -40,8 +43,8 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       remotes: {
-    		\\"remote1\\": 'remote1@http://localhost:4201/remoteEntry.js',
-    		\\"remote2\\": 'remote2@http://localhost:4202/remoteEntry.js',
+    		\\"remote1\\": 'http://localhost:4201/remoteEntry.js',
+    		\\"remote2\\": 'http://localhost:4202/remoteEntry.js',
       
       },
       shared: {
@@ -51,6 +54,9 @@ module.exports = {
         \\"@angular/router\\": { singleton: true, strictVersion: true },
         ...sharedMappings.getDescriptors(),
       },
+      library: { 
+        type: 'module' 
+      },
     }),
     sharedMappings.getPlugin(),
   ],
@@ -90,6 +96,9 @@ module.exports = {
     runtimeChunk: false,
     minimize: false,
   },
+  experiments: {
+    outputModule: true
+  },
   resolve: {
     alias: {
       ...sharedMappings.getAliases(),
@@ -98,7 +107,7 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       remotes: {
-    		\\"remote1\\": 'remote1@http://localhost:4200/remoteEntry.js',
+    		\\"remote1\\": 'http://localhost:4200/remoteEntry.js',
       
       },
       shared: {
@@ -108,6 +117,9 @@ module.exports = {
         \\"@angular/router\\": { singleton: true, strictVersion: true },
         ...sharedMappings.getDescriptors(),
       },
+      library: { 
+        type: 'module' 
+      },
     }),
     sharedMappings.getPlugin(),
   ],
@@ -147,6 +159,9 @@ module.exports = {
     runtimeChunk: false,
     minimize: false,
   },
+  experiments: {
+    outputModule: true
+  },
   resolve: {
     alias: {
       ...sharedMappings.getAliases(),
@@ -164,6 +179,9 @@ module.exports = {
         \\"@angular/router\\": { singleton: true, strictVersion: true },
         ...sharedMappings.getDescriptors(),
       },
+      library: { 
+        type: 'module' 
+      },
     }),
     sharedMappings.getPlugin(),
   ],
@@ -203,6 +221,9 @@ module.exports = {
     runtimeChunk: false,
     minimize: false,
   },
+  experiments: {
+    outputModule: true
+  },
   resolve: {
     alias: {
       ...sharedMappings.getAliases(),
@@ -222,6 +243,9 @@ module.exports = {
         \\"@angular/router\\": { singleton: true, strictVersion: true },
         ...sharedMappings.getDescriptors(),
       },
+      library: { 
+        type: 'module' 
+      },
     }),
     sharedMappings.getPlugin(),
   ],

diff --git a/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap b/packages/angular/src/generators/setup-mfe/__snapshots__/setup-mfe.spec.ts.snap
@@ -62,6 +62,9 @@ module.exports = {
     runtimeChunk: false,
     minimize: false,
   },
+  experiments: {
+    outputModule: true
+  },
   resolve: {
     alias: {
       ...sharedMappings.getAliases(),
@@ -70,8 +73,8 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       remotes: {
-    		\\"remote1\\": 'remote1@http://localhost:4201/remoteEntry.js',
-    		\\"remote2\\": 'remote2@http://localhost:4202/remoteEntry.js',
+    		\\"remote1\\": 'http://localhost:4201/remoteEntry.js',
+    		\\"remote2\\": 'http://localhost:4202/remoteEntry.js',
       
       },
       shared: {
@@ -81,6 +84,9 @@ module.exports = {
         \\"@angular/router\\": { singleton: true, strictVersion: true },
         ...sharedMappings.getDescriptors(),
       },
+      library: { 
+        type: 'module' 
+      },
     }),
     sharedMappings.getPlugin(),
   ],
@@ -120,6 +126,9 @@ module.exports = {
     runtimeChunk: false,
     minimize: false,
   },
+  experiments: {
+    outputModule: true
+  },
   resolve: {
     alias: {
       ...sharedMappings.getAliases(),
@@ -128,7 +137,7 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       remotes: {
-    		\\"remote1\\": 'remote1@http://localhost:4200/remoteEntry.js',
+    		\\"remote1\\": 'http://localhost:4200/remoteEntry.js',
       
       },
       shared: {
@@ -138,6 +147,9 @@ module.exports = {
         \\"@angular/router\\": { singleton: true, strictVersion: true },
         ...sharedMappings.getDescriptors(),
       },
+      library: { 
+        type: 'module' 
+      },
     }),
     sharedMappings.getPlugin(),
   ],
@@ -177,6 +189,9 @@ module.exports = {
     runtimeChunk: false,
     minimize: false,
   },
+  experiments: {
+    outputModule: true
+  },
   resolve: {
     alias: {
       ...sharedMappings.getAliases(),
@@ -194,6 +209,9 @@ module.exports = {
         \\"@angular/router\\": { singleton: true, strictVersion: true },
         ...sharedMappings.getDescriptors(),
       },
+      library: { 
+        type: 'module' 
+      },
     }),
     sharedMappings.getPlugin(),
   ],
@@ -233,6 +251,9 @@ module.exports = {
     runtimeChunk: false,
     minimize: false,
   },
+  experiments: {
+    outputModule: true
+  },
   resolve: {
     alias: {
       ...sharedMappings.getAliases(),
@@ -252,6 +273,9 @@ module.exports = {
         \\"@angular/router\\": { singleton: true, strictVersion: true },
         ...sharedMappings.getDescriptors(),
       },
+      library: { 
+        type: 'module' 
+      },
     }),
     sharedMappings.getPlugin(),
   ],

diff --git a/packages/angular/src/generators/setup-mfe/files/webpack/webpack.config.js__tmpl__ b/packages/angular/src/generators/setup-mfe/files/webpack/webpack.config.js__tmpl__
@@ -29,6 +29,9 @@ module.exports = {
     runtimeChunk: false,
     minimize: false,
   },
+  experiments: {
+    outputModule: true
+  },
   resolve: {
     alias: {
       ...sharedMappings.getAliases(),
@@ -42,12 +45,15 @@ module.exports = {
         './Module': '<%= sourceRoot %>/src/app/remote-entry/entry.module.ts',
       },<% } %><% if(type === 'host') { %>
       remotes: {
-      <% remotes.forEach(function(remote) { %>"<%= remote.remoteName %>": "<%= remote.remoteName %>@http://localhost:<%= remote.port %>/remoteEntry.js",<% }); %>
+      <% remotes.forEach(function(remote) { %>"<%= remote.remoteName %>": "http://localhost:<%= remote.port %>/remoteEntry.js",<% }); %>
       },<% } %>
       shared: {<% sharedLibraries.forEach(function (lib) { %>
         "<%= lib %>": { singleton: true, strictVersion: true },<% }); %>
         ...sharedMappings.getDescriptors(),
       },
+      library: { 
+        type: 'module' 
+      },
     }),
     sharedMappings.getPlugin(),
   ],

diff --git a/packages/angular/src/generators/setup-mfe/lib/add-remote-to-host.ts b/packages/angular/src/generators/setup-mfe/lib/add-remote-to-host.ts
@@ -31,7 +31,7 @@ export function addRemoteToHost(host: Tree, options: Schema) {
     const endOfPropertiesPos = mfRemotesNode.properties.end;
 
     const updatedConfig = `${hostWebpackConfig.slice(0, endOfPropertiesPos)}
-    \t\t"${options.appName}": '${options.appName}@http://localhost:${
+    \t\t"${options.appName}": 'http://localhost:${
       options.port ?? 4200
     }/remoteEntry.js',${hostWebpackConfig.slice(endOfPropertiesPos)}`;
 

diff --git a/packages/angular/src/generators/setup-mfe/lib/setup-serve-target.ts b/packages/angular/src/generators/setup-mfe/lib/setup-serve-target.ts
@@ -15,6 +15,9 @@ export function setupServeTarget(host: Tree, options: Schema) {
     options: {
       ...appConfig.targets['serve'].options,
       port: options.port ?? undefined,
+      publicHost: options.host
+        ? undefined
+        : `http://localhost:${options.port ?? 4200}`,
     },
   };
 

diff --git a/packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts b/packages/angular/src/generators/setup-mfe/setup-mfe.spec.ts
@@ -151,7 +151,7 @@ describe('Init MFE', () => {
     const webpackContents = host.read(`apps/app1/webpack.config.js`, 'utf-8');
 
     expect(webpackContents).toContain(
-      '"remote1": "remote1@http://localhost:4200/remoteEntry.js"'
+      '"remote1": "http://localhost:4200/remoteEntry.js"'
     );
   });
   it('should update the implicit dependencies of the host when --remotes flag supplied', async () => {