fix(angular): failing tests related to mfe (#9491)

nrwl · Mar 24, 2022 · 53799ef · 53799ef
1 parent 09ad5ff
commit 53799ef
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/packages/angular/src/generators/convert-to-with-mf/convert-to-with-mf.ts b/packages/angular/src/generators/convert-to-with-mf/convert-to-with-mf.ts
@@ -13,7 +13,7 @@ import {
 } from './lib';
 
 export default async function convertToWithMF(tree: Tree, schema: Schema) {
-  const projects = new Set(getMfeProjects(tree));
+  const projects = new Set(getMfeProjects(tree, { legacy: true }));
 
   if (!projects.has(schema.project)) {
     throw new Error(

diff --git a/packages/angular/src/utils/get-mfe-projects.ts b/packages/angular/src/utils/get-mfe-projects.ts
@@ -2,9 +2,15 @@ import type { Tree } from '@nrwl/devkit';
 import { tsquery } from '@phenomnomnominal/tsquery';
 import { forEachExecutorOptions } from '@nrwl/workspace/src/utilities/executor-options-utils';
 
-export function getMfeProjects(tree: Tree) {
+export function getMfeProjects(
+  tree: Tree,
+  { legacy }: { legacy: boolean } = { legacy: false }
+) {
   const NRWL_WEBPACK_BROWSER_BUILDER = '@nrwl/angular:webpack-browser';
   const CUSTOM_WEBPACK_OPTION = 'customWebpackConfig';
+  const MODULE_FEDERATION_IDENTIFIER = legacy
+    ? 'Identifier[name=ModuleFederationPlugin]'
+    : 'Identifier[name=withModuleFederation]';
 
   const projects: string[] = [];
   forEachExecutorOptions(
@@ -19,7 +25,7 @@ export function getMfeProjects(tree: Tree) {
       const ast = tsquery.ast(webpackConfig);
       const moduleFederationWebpackConfig = tsquery(
         ast,
-        'Identifier[name=withModuleFederation]',
+        MODULE_FEDERATION_IDENTIFIER,
         {
           visitAllChildren: true,
         }

diff --git a/packages/angular/src/utils/mfe/__snapshots__/with-module-federation.spec.ts.snap b/packages/angular/src/utils/mfe/__snapshots__/with-module-federation.spec.ts.snap
@@ -48,7 +48,7 @@ Array [
       },
       "name": "host",
       "remotes": Object {
-        "remote1": "http:/localhost:4201/remoteEntry.mjs",
+        "remote1": "http://localhost:4201/remoteEntry.mjs",
       },
       "shared": Object {
         "@angular/core": Object {

diff --git a/packages/angular/src/utils/mfe/with-module-federation.spec.ts b/packages/angular/src/utils/mfe/with-module-federation.spec.ts
@@ -10,7 +10,7 @@ import * as fs from 'fs';
 
 import { withModuleFederation } from './with-module-federation';
 
-xdescribe('withModuleFederation', () => {
+describe('withModuleFederation', () => {
   afterEach(() => jest.clearAllMocks());
   it('should create a host config correctly', async () => {
     // ARRANGE

diff --git a/packages/angular/src/utils/mfe/with-module-federation.ts b/packages/angular/src/utils/mfe/with-module-federation.ts
@@ -4,9 +4,8 @@ import {
   shareWorkspaceLibraries,
 } from './mfe-webpack';
 import {
-  appRootPath,
+  workspaceRoot,
   createProjectGraphAsync,
-  joinPathFragments,
   ProjectGraph,
   readCachedProjectGraph,
   Workspaces,
@@ -62,7 +61,9 @@ function recursivelyResolveWorkspaceDependents(
 }
 
 function mapWorkspaceLibrariesToTsConfigImport(workspaceLibraries: string[]) {
-  const { projects } = new Workspaces(appRootPath).readWorkspaceConfiguration();
+  const { projects } = new Workspaces(
+    workspaceRoot
+  ).readWorkspaceConfiguration();
 
   const tsConfigPath = process.env.NX_TSCONFIG_PATH ?? getRootTsConfigPath();
   const tsConfig: ParsedCommandLine = readTsConfig(tsConfigPath);
@@ -150,7 +151,9 @@ function determineRemoteUrl(remote: string) {
       You can also use the tuple syntax in your webpack config to configure your remotes. e.g. \`remotes: [['remote1', 'http://localhost:4201']]\``
     );
   }
-  return joinPathFragments(publicHost, 'remoteEntry.mjs');
+  return `${
+    publicHost.endsWith('/') ? publicHost.slice(0, -1) : publicHost
+  }/remoteEntry.mjs`;
 }
 
 function mapRemotes(remotes: MFERemotes) {