feat(module-federation): add comment to generated module federation config explaining usage of external remotes (#20177)

packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap

@@ -185,6 +185,18 @@ exports[`Host App Generator --ssr should generate the correct files 5`] = `
 exports[`Host App Generator --ssr should generate the correct files 6`] = `
 "module.exports = {
   name: 'test',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a \`remotes.d.ts\` file to your \`src/\` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: [],
 };
 "
@@ -358,6 +370,18 @@ exports[`Host App Generator --ssr should generate the correct files for standalo
 exports[`Host App Generator --ssr should generate the correct files for standalone 5`] = `
 "module.exports = {
   name: 'test',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a \`remotes.d.ts\` file to your \`src/\` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: [],
 };
 "
@@ -558,6 +582,18 @@ exports[`Host App Generator --ssr should generate the correct files for standalo
 
 const config: ModuleFederationConfig = {
   name: 'test',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a \`remotes.d.ts\` file to your \`src/\` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: [],
 };
 
@@ -775,6 +811,18 @@ exports[`Host App Generator --ssr should generate the correct files when --types
 
 const config: ModuleFederationConfig = {
   name: 'test',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a \`remotes.d.ts\` file to your \`src/\` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: [],
 };
 

packages/angular/src/generators/setup-mf/__snapshots__/setup-mf.spec.ts.snap

@@ -46,6 +46,18 @@ export const appRoutes: Route[] = [
 exports[`Init MF should add a remote application and add it to a specified host applications webpack config that contains a remote application already 1`] = `
 "module.exports = {
   name: 'app1',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a \`remotes.d.ts\` file to your \`src/\` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: ['remote1', 'remote2'],
 };
 "
@@ -56,6 +68,18 @@ exports[`Init MF should add a remote application and add it to a specified host
 
 const config: ModuleFederationConfig = {
   name: 'app1',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a \`remotes.d.ts\` file to your \`src/\` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: ['remote1', 'remote2'],
 };
 
@@ -66,6 +90,18 @@ export default config;
 exports[`Init MF should add a remote application and add it to a specified host applications webpack config when no other remote has been added to it 1`] = `
 "module.exports = {
   name: 'app1',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a \`remotes.d.ts\` file to your \`src/\` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: ['remote1'],
 };
 "
@@ -76,6 +112,18 @@ exports[`Init MF should add a remote application and add it to a specified host
 
 const config: ModuleFederationConfig = {
   name: 'app1',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a \`remotes.d.ts\` file to your \`src/\` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: ['remote1'],
 };
 
@@ -131,6 +179,18 @@ module.exports = withModuleFederation(config);
 exports[`Init MF should create webpack and mf configs correctly 2`] = `
 "module.exports = {
   name: 'app1',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a \`remotes.d.ts\` file to your \`src/\` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: [],
 };
 "
@@ -166,6 +226,18 @@ exports[`Init MF should create webpack and mf configs correctly when --typescrip
 
 const config: ModuleFederationConfig = {
   name: 'app1',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a \`remotes.d.ts\` file to your \`src/\` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: [],
 };
 

packages/angular/src/generators/setup-mf/files/ts-webpack/module-federation.config.ts__tmpl__

@@ -2,6 +2,18 @@ import { ModuleFederationConfig } from '@nx/webpack';
 
 const config: ModuleFederationConfig = {
   name: '<%= name %>',<% if(type === 'host') { %>
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: [<% remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); %>]<% } %><% if(type === 'remote') { %>
   exposes: {<% if(standalone) { %>
     './Routes': '<%= projectRoot %>/src/app/remote-entry/entry.routes.ts',<% } else { %>

packages/angular/src/generators/setup-mf/files/webpack/module-federation.config.js__tmpl__

@@ -1,8 +1,20 @@
 module.exports = {
   name: '<%= name %>',<% if(type === 'host') { %>
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: [<% remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); %>]<% } %><% if(type === 'remote') { %>
   exposes: {<% if(standalone) { %>
     './Routes': '<%= projectRoot %>/src/app/remote-entry/entry.routes.ts',<% } else { %>
     './Module': '<%= projectRoot %>/src/app/remote-entry/entry.module.ts',<% } %>
   },<% } %>
-}
+}

packages/react/src/generators/host/__snapshots__/host.spec.ts.snap

@@ -23,6 +23,18 @@ module.exports = composePlugins(
 exports[`hostGenerator should generate host files and configs 2`] = `
 "module.exports = {
   name: 'test',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a \`remotes.d.ts\` file to your \`src/\` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: [],
 };
 "
@@ -120,6 +132,18 @@ exports[`hostGenerator should generate host files and configs when --typescriptC
 
 const config: ModuleFederationConfig = {
   name: 'test',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a \`remotes.d.ts\` file to your \`src/\` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: [],
 };
 

packages/react/src/generators/host/files/module-federation-ts/module-federation.config.ts__tmpl__

@@ -2,6 +2,18 @@ import { ModuleFederationConfig } from '@nx/webpack';
 
 const config: ModuleFederationConfig = {
     name: '<%= projectName %>',
+    /**
+     * To use a remote that does not exist in your current Nx Workspace
+     * You can use the tuple-syntax to define your remote
+     *
+     * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+     *
+     * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
+     * following content:
+     *
+     * declare module 'my-external-remote';
+     *
+     */
     remotes: [
         <% remotes.forEach(function(r) {%> "<%= r.fileName %>", <% }); %>
 ],

packages/react/src/generators/host/files/module-federation/module-federation.config.js__tmpl__

@@ -1,5 +1,17 @@
 module.exports = {
   name: '<%= projectName %>',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
   remotes: [
   <% remotes.forEach(function(r) {%> "<%= r.fileName %>", <% }); %>
   ],