Skip to content

Commit

Permalink
feat(angular): switch default to typescript configuration for module …
Browse files Browse the repository at this point in the history 
…federation (#18998)
  • Loading branch information
@Coly010
Coly010 authored Oct 10, 2023
1 parent 5366d49 commit 9be869f
Show file tree
Hide file tree
Showing 34 changed files with 1,632 additions and 45 deletions.
5 changes: 5 additions & 0 deletions docs/generated/packages/angular/generators/host.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,11 @@
"type": "boolean",
"default": false,
"x-priority": "important"
},
"typescriptConfiguration": {
"type": "boolean",
"description": "Whether the module federation configuration and webpack configuration files should use TS.",
"default": true
}
},
"additionalProperties": false,
Expand Down
5 changes: 5 additions & 0 deletions docs/generated/packages/angular/generators/remote.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,11 @@
"description": "Whether to configure SSR for the remote application to be consumed by a host application using SSR.",
"type": "boolean",
"default": false
},
"typescriptConfiguration": {
"type": "boolean",
"description": "Whether the module federation configuration and webpack configuration files should use TS.",
"default": true
}
},
"additionalProperties": false,
Expand Down
5 changes: 5 additions & 0 deletions docs/generated/packages/angular/generators/setup-mf.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,11 @@
"type": "boolean",
"description": "Whether the application is a standalone application. _Note: This is only supported in Angular versions >= 14.1.0_",
"default": false
},
"typescriptConfiguration": {
"type": "boolean",
"description": "Whether the module federation configuration and webpack configuration files should use TS.",
"default": true
}
},
"required": ["appName", "mfType"],
Expand Down
106 changes: 83 additions & 23 deletions e2e/angular-core/src/module-federation.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ describe('Angular Module Federation', () => {
}Module } from '@${proj}/${sharedLib}';
import { ${
names(secondaryEntry).className
}Module } from '@${proj}/${secondaryEntry}';
}Module } from '@${proj}/${sharedLib}/${secondaryEntry}';
import { AppComponent } from './app.component';
import { NxWelcomeComponent } from './nx-welcome.component';
import { RouterModule } from '@angular/router';
Expand All @@ -79,7 +79,7 @@ describe('Angular Module Federation', () => {
declarations: [AppComponent, NxWelcomeComponent],
imports: [
BrowserModule,
SharedModule,
${names(sharedLib).className}Module,
RouterModule.forRoot(
[
{
Expand Down Expand Up @@ -107,14 +107,15 @@ describe('Angular Module Federation', () => {
import { ${names(sharedLib).className}Module } from '@${proj}/${sharedLib}';
import { ${
names(secondaryEntry).className
}Module } from '@${proj}/${secondaryEntry}';
}Module } from '@${proj}/${sharedLib}/${secondaryEntry}';
import { RemoteEntryComponent } from './entry.component';
import { NxWelcomeComponent } from './nx-welcome.component';
@NgModule({
declarations: [RemoteEntryComponent],
declarations: [RemoteEntryComponent, NxWelcomeComponent],
imports: [
CommonModule,
SharedModule,
${names(sharedLib).className}Module,
RouterModule.forChild([
{
path: '',
Expand All @@ -128,15 +129,23 @@ describe('Angular Module Federation', () => {
`
);

const process = await runCommandUntil(
const processSwc = await runCommandUntil(
`serve ${hostApp} --port=${hostPort} --dev-remotes=${remoteApp1}`,
(output) =>
output.includes(`listening on localhost:${remotePort}`) &&
!output.includes(`Remote '${remoteApp1}' failed to serve correctly`) &&
output.includes(`listening on localhost:${hostPort}`)
);
await killProcessAndPorts(processSwc.pid, hostPort, remotePort);

// port and process cleanup
await killProcessAndPorts(process.pid, hostPort, remotePort);
const processTsNode = await runCommandUntil(
`serve ${hostApp} --port=${hostPort} --dev-remotes=${remoteApp1}`,
(output) =>
!output.includes(`Remote '${remoteApp1}' failed to serve correctly`) &&
output.includes(`listening on localhost:${hostPort}`),
{ env: { NX_PREFER_TS_NODE: 'true' } }
);

await killProcessAndPorts(processTsNode.pid, hostPort, remotePort);
}, 20_000_000);

it('should convert apps to MF successfully', async () => {
Expand All @@ -161,15 +170,24 @@ describe('Angular Module Federation', () => {
`generate @nx/angular:setup-mf ${app2} --mfType=remote --host=${app1} --port=${app2Port} --no-interactive`
);

const process = await runCommandUntil(
const processSwc = await runCommandUntil(
`serve ${app1} --dev-remotes=${app2}`,
(output) =>
!output.includes(`Remote '${app2}' failed to serve correctly`) &&
output.includes(`listening on localhost:${app1Port}`)
);

await killProcessAndPorts(processSwc.pid, app1Port, app2Port);

const processTsNode = await runCommandUntil(
`serve ${app1} --dev-remotes=${app2}`,
(output) =>
output.includes(`listening on localhost:${app1Port}`) &&
output.includes(`listening on localhost:${app2Port}`)
!output.includes(`Remote '${app2}' failed to serve correctly`) &&
output.includes(`listening on localhost:${app1Port}`),
{ env: { NX_PREFER_TS_NODE: 'true' } }
);

// port and process cleanup
await killProcessAndPorts(process.pid, app1Port, app2Port);
await killProcessAndPorts(processTsNode.pid, app1Port, app2Port);
}, 20_000_000);

it('should scaffold MF + SSR setup successfully', async () => {
Expand All @@ -189,7 +207,7 @@ describe('Angular Module Federation', () => {
const remote2Port = readJson(join(remote2, 'project.json')).targets.serve
.options.port;

const process = await runCommandUntil(
const processSwc = await runCommandUntil(
`serve-ssr ${host} --port=${hostPort}`,
(output) =>
output.includes(
Expand All @@ -203,8 +221,34 @@ describe('Angular Module Federation', () => {
)
);

// port and process cleanup
await killProcessAndPorts(process.pid, hostPort, remote1Port, remote2Port);
await killProcessAndPorts(
processSwc.pid,
hostPort,
remote1Port,
remote2Port
);

const processTsNode = await runCommandUntil(
`serve-ssr ${host} --port=${hostPort}`,
(output) =>
output.includes(
`Node Express server listening on http://localhost:${remote1Port}`
) &&
output.includes(
`Node Express server listening on http://localhost:${remote2Port}`
) &&
output.includes(
`Angular Universal Live Development Server is listening`
),
{ env: { NX_PREFER_TS_NODE: 'true' } }
);

await killProcessAndPorts(
processTsNode.pid,
hostPort,
remote1Port,
remote2Port
);
}, 20_000_000);

it('should should support generating host and remote apps with --project-name-and-root-format=derived', async () => {
Expand All @@ -229,17 +273,33 @@ describe('Angular Module Federation', () => {
);

// check default generated host is built successfully
const buildOutput = runCLI(`build ${hostApp}`);
expect(buildOutput).toContain('Successfully ran target build');
const buildOutputSwc = runCLI(`build ${hostApp}`);
expect(buildOutputSwc).toContain('Successfully ran target build');

const process = await runCommandUntil(
const buildOutputTsNode = runCLI(`build ${hostApp}`, {
env: { NX_PREFER_TS_NODE: 'true' },
});
expect(buildOutputTsNode).toContain('Successfully ran target build');

const processSwc = await runCommandUntil(
`serve ${hostApp} --port=${hostPort} --dev-remotes=${remoteApp}`,
(output) =>
output.includes(`listening on localhost:${remotePort}`) &&
!output.includes(`Remote '${remoteApp}' failed to serve correctly`) &&
output.includes(`listening on localhost:${hostPort}`)
);

// port and process cleanup
await killProcessAndPorts(process.pid, hostPort, remotePort);
await killProcessAndPorts(processSwc.pid, hostPort, remotePort);

const processTsNode = await runCommandUntil(
`serve ${hostApp} --port=${hostPort} --dev-remotes=${remoteApp}`,
(output) =>
!output.includes(`Remote '${remoteApp}' failed to serve correctly`) &&
output.includes(`listening on localhost:${hostPort}`),
{
env: { NX_PREFER_TS_NODE: 'true' },
}
);

await killProcessAndPorts(processTsNode.pid, hostPort, remotePort);
}, 20_000_000);
});
6 changes: 5 additions & 1 deletion e2e/utils/command-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,10 @@ export function runCommandAsync(

export function runCommandUntil(
command: string,
criteria: (output: string) => boolean
criteria: (output: string) => boolean,
opts: RunCmdOpts = {
env: undefined,
}
): Promise<ChildProcess> {
const pm = getPackageManagerCommand();
const p = exec(`${pm.runNx} ${command}`, {
Expand All @@ -238,6 +241,7 @@ export function runCommandUntil(
env: {
CI: 'true',
...getStrippedEnvironmentVariables(),
...opts.env,
FORCE_COLOR: 'false',
},
});
Expand Down
Loading

1 comment on commit 9be869f

@vercel
Copy link

@vercel vercel bot commented on 9be869f Oct 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nx-dev – ./

nx-dev-git-master-nrwl.vercel.app
nx-five.vercel.app
nx-dev-nrwl.vercel.app
nx.dev

Please sign in to comment.