feat(react): add remote to tspaths for typing (#19276)

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

@@ -418,11 +418,6 @@ bootstrapApplication(AppComponent, appConfig).catch((err) =>
 `;
 
 exports[`Host App Generator should generate a host with remotes using standalone components 2`] = `
-"declare module 'remote1/Routes';
-"
-`;
-
-exports[`Host App Generator should generate a host with remotes using standalone components 3`] = `
 "import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { NxWelcomeComponent } from './nx-welcome.component';

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

@@ -131,7 +131,6 @@ describe('Host App Generator', () => {
     // ASSERT
     expect(tree.exists(`host/src/app/app.module.ts`)).toBeFalsy();
     expect(tree.read(`host/src/bootstrap.ts`, 'utf-8')).toMatchSnapshot();
-    expect(tree.read(`host/src/remotes.d.ts`, 'utf-8')).toMatchSnapshot();
     expect(
       tree.read(`host/src/app/app.component.ts`, 'utf-8')
     ).toMatchSnapshot();

packages/angular/src/generators/remote/remote.spec.ts

@@ -1,6 +1,7 @@
 import { E2eTestRunner } from '../../utils/test-runners';
 import {
   getProjects,
+  readJson,
   readNxJson,
   readProjectConfiguration,
   stripIndents,
@@ -11,6 +12,7 @@ import {
   generateTestHostApplication,
   generateTestRemoteApplication,
 } from '../utils/testing';
+import { getRootTsConfigPathInTree } from '@nx/js';
 
 describe('MF Remote App Generator', () => {
   it('should generate a remote mf app with no host', async () => {
@@ -25,6 +27,10 @@ describe('MF Remote App Generator', () => {
 
     // ASSERT
     expect(tree.read('test/webpack.config.js', 'utf-8')).toMatchSnapshot();
+    const tsconfigJson = readJson(tree, getRootTsConfigPathInTree(tree));
+    expect(tsconfigJson.compilerOptions.paths['test/Module']).toEqual([
+      'test/src/app/remote-entry/entry.module.ts',
+    ]);
   });
 
   it('should generate a remote mf app with a host', async () => {
@@ -138,6 +144,10 @@ describe('MF Remote App Generator', () => {
     expect(
       tree.read(`test/src/app/remote-entry/entry.routes.ts`, 'utf-8')
     ).toMatchSnapshot();
+    const tsconfigJson = readJson(tree, getRootTsConfigPathInTree(tree));
+    expect(tsconfigJson.compilerOptions.paths['test/Routes']).toEqual([
+      'test/src/app/remote-entry/entry.routes.ts',
+    ]);
   });
 
   it('should not generate an e2e project when e2eTestRunner is none', async () => {

packages/angular/src/generators/setup-mf/lib/add-remote-to-host.ts

@@ -41,19 +41,19 @@ export function addRemoteToHost(tree: Tree, options: Schema) {
       addRemoteToDynamicHost(tree, options, pathToMFManifest);
     }
 
-    const declarationFilePath = joinPathFragments(
-      hostProject.sourceRoot,
-      'remotes.d.ts'
-    );
-
-    const declarationFileContent =
-      (tree.exists(declarationFilePath)
-        ? tree.read(declarationFilePath, 'utf-8')
-        : '') +
-      `\ndeclare module '${options.appName}/${
-        options.standalone ? `Routes` : `Module`
-      }';`;
-    tree.write(declarationFilePath, declarationFileContent);
+    // const declarationFilePath = joinPathFragments(
+    //   hostProject.sourceRoot,
+    //   'remotes.d.ts'
+    // );
+    //
+    // const declarationFileContent =
+    //   (tree.exists(declarationFilePath)
+    //     ? tree.read(declarationFilePath, 'utf-8')
+    //     : '') +
+    //   `\ndeclare module '${options.appName}/${
+    //     options.standalone ? `Routes` : `Module`
+    //   }';`;
+    // tree.write(declarationFilePath, declarationFileContent);
 
     addLazyLoadedRouteToHostAppModule(tree, options, hostFederationType);
   }

packages/angular/src/generators/setup-mf/lib/index.ts

@@ -11,3 +11,4 @@ export * from './setup-host-if-dynamic';
 export * from './setup-serve-target';
 export * from './update-host-app-routes';
 export * from './remove-dead-code-from-remote';
+export * from './setup-tspath-for-remote';

packages/angular/src/generators/setup-mf/lib/setup-tspath-for-remote.ts

@@ -0,0 +1,18 @@
+import type { Tree } from '@nx/devkit';
+import type { Schema } from '../schema';
+import { joinPathFragments, readProjectConfiguration } from '@nx/devkit';
+import { addTsConfigPath } from '@nx/js';
+
+export function setupTspathForRemote(tree: Tree, options: Schema) {
+  const project = readProjectConfiguration(tree, options.appName);
+
+  const exportPath = options.standalone
+    ? `./src/app/remote-entry/entry.routes.ts`
+    : `./src/app/remote-entry/entry.module.ts`;
+
+  const exportName = options.standalone ? 'Routes' : 'Module';
+
+  addTsConfigPath(tree, `${options.appName}/${exportName}`, [
+    joinPathFragments(project.root, exportPath),
+  ]);
+}

packages/angular/src/generators/setup-mf/setup-mf.ts

@@ -17,6 +17,7 @@ import {
   normalizeOptions,
   removeDeadCodeFromRemote,
   setupHostIfDynamic,
+  setupTspathForRemote,
   setupServeTarget,
   updateHostAppRoutes,
   updateTsConfigTarget,
@@ -41,6 +42,7 @@ export async function setupMf(tree: Tree, rawOptions: Schema) {
     addRemoteToHost(tree, options);
     addRemoteEntry(tree, options, projectConfig.root);
     removeDeadCodeFromRemote(tree, options);
+    setupTspathForRemote(tree, options);
     installTask = addDependenciesToPackageJson(
       tree,
       {},

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

@@ -28,7 +28,6 @@ describe('hostGenerator', () => {
     expect(tree.exists('test/module-federation.config.js')).toBeTruthy();
     expect(tree.exists('test/src/bootstrap.tsx')).toBeTruthy();
     expect(tree.exists('test/src/main.ts')).toBeTruthy();
-    expect(tree.exists('test/src/remotes.d.ts')).toBeTruthy();
     expect(tree.read('test/webpack.config.js', 'utf-8')).toMatchSnapshot();
     expect(
       tree.read('test/module-federation.config.js', 'utf-8')
@@ -52,7 +51,6 @@ describe('hostGenerator', () => {
     expect(tree.exists('test/module-federation.config.ts')).toBeTruthy();
     expect(tree.exists('test/src/bootstrap.tsx')).toBeTruthy();
     expect(tree.exists('test/src/main.ts')).toBeTruthy();
-    expect(tree.exists('test/src/remotes.d.ts')).toBeTruthy();
     expect(tree.read('test/webpack.config.ts', 'utf-8')).toMatchSnapshot();
     expect(
       tree.read('test/module-federation.config.ts', 'utf-8')
@@ -95,7 +93,6 @@ describe('hostGenerator', () => {
     expect(tree.exists('test/src/main.server.tsx')).toBeTruthy();
     expect(tree.exists('test/src/bootstrap.tsx')).toBeTruthy();
     expect(tree.exists('test/src/main.ts')).toBeTruthy();
-    expect(tree.exists('test/src/remotes.d.ts')).toBeTruthy();
 
     expect(readJson(tree, 'test/tsconfig.server.json')).toEqual({
       compilerOptions: {
@@ -136,7 +133,6 @@ describe('hostGenerator', () => {
     expect(tree.exists('test/src/main.server.tsx')).toBeTruthy();
     expect(tree.exists('test/src/bootstrap.tsx')).toBeTruthy();
     expect(tree.exists('test/src/main.ts')).toBeTruthy();
-    expect(tree.exists('test/src/remotes.d.ts')).toBeTruthy();
 
     expect(readJson(tree, 'test/tsconfig.server.json')).toEqual({
       compilerOptions: {

packages/react/src/generators/remote/lib/setup-tspath-for-remote.ts

@@ -0,0 +1,16 @@
+import type { Tree } from '@nx/devkit';
+import type { Schema } from '../schema';
+import { joinPathFragments, readProjectConfiguration } from '@nx/devkit';
+import { addTsConfigPath } from '@nx/js';
+
+export function setupTspathForRemote(tree: Tree, options: Schema) {
+  const project = readProjectConfiguration(tree, options.name);
+
+  const exportPath = `./src/remote-entry.ts`;
+
+  const exportName = 'Module';
+
+  addTsConfigPath(tree, `${options.name}/${exportName}`, [
+    joinPathFragments(project.root, exportPath),
+  ]);
+}

packages/react/src/generators/remote/remote.spec.ts

@@ -2,6 +2,7 @@ import { readJson, readNxJson } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import { Linter } from '@nx/linter';
 import remote from './remote';
+import { getRootTsConfigPath, getRootTsConfigPathInTree } from '@nx/js';
 
 describe('remote generator', () => {
   it('should create the remote with the correct config files', async () => {
@@ -27,6 +28,11 @@ describe('remote generator', () => {
     expect(
       tree.read('test/module-federation.config.js', 'utf-8')
     ).toMatchSnapshot();
+
+    const tsconfigJson = readJson(tree, getRootTsConfigPathInTree(tree));
+    expect(tsconfigJson.compilerOptions.paths['test/Module']).toEqual([
+      'test/src/remote-entry.ts',
+    ]);
   });
 
   it('should create the remote with the correct config files when --typescriptConfiguration=true', async () => {

packages/react/src/generators/remote/remote.ts

@@ -19,6 +19,7 @@ import { updateModuleFederationProject } from '../../rules/update-module-federat
 import { Schema } from './schema';
 import setupSsrGenerator from '../setup-ssr/setup-ssr';
 import { setupSsrForRemote } from './lib/setup-ssr-for-remote';
+import { setupTspathForRemote } from './lib/setup-tspath-for-remote';
 
 export function addModuleFederationFiles(
   host: Tree,
@@ -94,6 +95,7 @@ export async function remoteGeneratorInternal(host: Tree, schema: Schema) {
 
   addModuleFederationFiles(host, options);
   updateModuleFederationProject(host, options);
+  setupTspathForRemote(host, options);
 
   if (options.ssr) {
     const setupSsrTask = await setupSsrGenerator(host, {