diff --git a/packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap b/packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap index c2243fd20e..9f96433fe4 100644 --- a/packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap +++ b/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: [], }; diff --git a/packages/angular/src/generators/setup-mf/__snapshots__/setup-mf.spec.ts.snap b/packages/angular/src/generators/setup-mf/__snapshots__/setup-mf.spec.ts.snap index 422e2f2d06..072177fca7 100644 --- a/packages/angular/src/generators/setup-mf/__snapshots__/setup-mf.spec.ts.snap +++ b/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: [], }; diff --git a/packages/angular/src/generators/setup-mf/files/ts-webpack/module-federation.config.ts__tmpl__ b/packages/angular/src/generators/setup-mf/files/ts-webpack/module-federation.config.ts__tmpl__ index 867ac426a8..f785a0535c 100644 --- a/packages/angular/src/generators/setup-mf/files/ts-webpack/module-federation.config.ts__tmpl__ +++ b/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 { %> diff --git a/packages/angular/src/generators/setup-mf/files/webpack/module-federation.config.js__tmpl__ b/packages/angular/src/generators/setup-mf/files/webpack/module-federation.config.js__tmpl__ index 420e05622c..536368a0bf 100644 --- a/packages/angular/src/generators/setup-mf/files/webpack/module-federation.config.js__tmpl__ +++ b/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',<% } %> },<% } %> -} \ No newline at end of file +} diff --git a/packages/react/src/generators/host/__snapshots__/host.spec.ts.snap b/packages/react/src/generators/host/__snapshots__/host.spec.ts.snap index 3f527ffc55..7f02c9d987 100644 --- a/packages/react/src/generators/host/__snapshots__/host.spec.ts.snap +++ b/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: [], }; diff --git a/packages/react/src/generators/host/files/module-federation-ts/module-federation.config.ts__tmpl__ b/packages/react/src/generators/host/files/module-federation-ts/module-federation.config.ts__tmpl__ index 98819353a1..0bbc4dd4bf 100644 --- a/packages/react/src/generators/host/files/module-federation-ts/module-federation.config.ts__tmpl__ +++ b/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 %>", <% }); %> ], diff --git a/packages/react/src/generators/host/files/module-federation/module-federation.config.js__tmpl__ b/packages/react/src/generators/host/files/module-federation/module-federation.config.js__tmpl__ index 08a4297504..7ac48c12c7 100644 --- a/packages/react/src/generators/host/files/module-federation/module-federation.config.js__tmpl__ +++ b/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 %>", <% }); %> ],