feat(angular): switch default to typescript configuration for module …

…federation
nrwl · Oct 4, 2023 · 1e5fe65 · 1e5fe65
1 parent 601b74d
commit 1e5fe65
Show file tree

Hide file tree

Showing 35 changed files with 1,693 additions and 35 deletions.
diff --git a/docs/generated/packages/angular/generators/host.json b/docs/generated/packages/angular/generators/host.json
@@ -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,

diff --git a/docs/generated/packages/angular/generators/remote.json b/docs/generated/packages/angular/generators/remote.json
@@ -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,

diff --git a/docs/generated/packages/angular/generators/setup-mf.json b/docs/generated/packages/angular/generators/setup-mf.json
@@ -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"],

diff --git a/e2e/angular-core/src/module-federation.test.ts b/e2e/angular-core/src/module-federation.test.ts
@@ -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';
@@ -79,7 +79,7 @@ describe('Angular Module Federation', () => {
         declarations: [AppComponent, NxWelcomeComponent],
         imports: [
           BrowserModule,
-          SharedModule,
+          ${names(sharedLib).className}Module,
           RouterModule.forRoot(
             [
               {
@@ -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: '',
@@ -131,7 +132,7 @@ describe('Angular Module Federation', () => {
     const process = await runCommandUntil(
       `serve ${hostApp} --port=${hostPort} --dev-remotes=${remoteApp1}`,
       (output) =>
-        output.includes(`listening on localhost:${remotePort}`) &&
+        output.includes(`NX  All remotes started`) &&
         output.includes(`listening on localhost:${hostPort}`)
     );
 
@@ -164,8 +165,8 @@ describe('Angular Module Federation', () => {
     const process = await runCommandUntil(
       `serve ${app1} --dev-remotes=${app2}`,
       (output) =>
-        output.includes(`listening on localhost:${app1Port}`) &&
-        output.includes(`listening on localhost:${app2Port}`)
+        output.includes(`NX  All remotes started`) &&
+        output.includes(`listening on localhost:${app1Port}`)
     );
 
     // port and process cleanup
@@ -235,7 +236,7 @@ describe('Angular Module Federation', () => {
     const process = 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}`)
     );
 

diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -64,6 +64,7 @@
     "@nx/js": "file:../js",
     "@nx/linter": "file:../linter",
     "@nx/webpack": "file:../webpack",
+    "@nx/web": "file:../web",
     "@nx/workspace": "file:../workspace"
   },
   "peerDependencies": {