feat(react): add remote to tspaths for typing

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',
+    ]);
   });
 
   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',
+    ]);
   });
 
   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`
+    : `./src/app/remote-entry/entry.module`;
+
+  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/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/app/remote-entry/entry.module`;
+
+  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/app/remote-entry/entry.module',
+    ]);
   });
 
   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, {