From 2c45f5833b2b444a4072b85a5dfbe01cba04f509 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leosvel=20P=C3=A9rez=20Espinosa?= Date: Tue, 13 Aug 2024 14:10:09 +0200 Subject: [PATCH] fix(angular): generate setting @nx/angular in devDependencies and move to dependencies when using runtime helpers --- .../src/generators/setup-mf/lib/index.ts | 1 + .../move-angular-plugin-to-dependencies.ts | 15 +++++++ .../src/generators/setup-mf/setup-mf.spec.ts | 41 ++++++++++++++++++- .../src/generators/setup-mf/setup-mf.ts | 25 +++++++---- .../src/generators/new/generate-preset.ts | 3 +- .../workspace/src/generators/new/new.spec.ts | 2 +- 6 files changed, 75 insertions(+), 12 deletions(-) create mode 100644 packages/angular/src/generators/setup-mf/lib/move-angular-plugin-to-dependencies.ts diff --git a/packages/angular/src/generators/setup-mf/lib/index.ts b/packages/angular/src/generators/setup-mf/lib/index.ts index 5e50483093940..b93431138e291 100644 --- a/packages/angular/src/generators/setup-mf/lib/index.ts +++ b/packages/angular/src/generators/setup-mf/lib/index.ts @@ -5,6 +5,7 @@ export * from './change-build-target'; export * from './fix-bootstrap'; export * from './generate-config'; export * from './get-remotes-with-ports'; +export * from './move-angular-plugin-to-dependencies'; export * from './normalize-options'; export * from './update-tsconfig'; export * from './setup-host-if-dynamic'; diff --git a/packages/angular/src/generators/setup-mf/lib/move-angular-plugin-to-dependencies.ts b/packages/angular/src/generators/setup-mf/lib/move-angular-plugin-to-dependencies.ts new file mode 100644 index 0000000000000..9b8fb414bd571 --- /dev/null +++ b/packages/angular/src/generators/setup-mf/lib/move-angular-plugin-to-dependencies.ts @@ -0,0 +1,15 @@ +import { readJson, writeJson, type Tree } from '@nx/devkit'; + +export function moveAngularPluginToDependencies(tree: Tree): void { + const packageJson = readJson(tree, 'package.json'); + if (packageJson.dependencies?.['@nx/angular']) { + return; + } + + packageJson.dependencies ??= {}; + packageJson.dependencies['@nx/angular'] = + packageJson.devDependencies['@nx/angular']; + delete packageJson.devDependencies['@nx/angular']; + + writeJson(tree, 'package.json', packageJson); +} diff --git a/packages/angular/src/generators/setup-mf/setup-mf.spec.ts b/packages/angular/src/generators/setup-mf/setup-mf.spec.ts index 1e0fd82bf6f57..aaed57ced1c27 100644 --- a/packages/angular/src/generators/setup-mf/setup-mf.spec.ts +++ b/packages/angular/src/generators/setup-mf/setup-mf.spec.ts @@ -3,13 +3,14 @@ import 'nx/src/internal-testing-utils/mock-project-graph'; import { readJson, readProjectConfiguration, - Tree, updateJson, + type Tree, } from '@nx/devkit'; import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; +import { E2eTestRunner } from '../../utils/test-runners'; +import { nxVersion } from '../../utils/versions'; import { generateTestApplication } from '../utils/testing'; import { setupMf } from './setup-mf'; -import { E2eTestRunner } from '../../utils/test-runners'; describe('Init MF', () => { let tree: Tree; @@ -760,6 +761,42 @@ describe('Init MF', () => { `); }); + it('should move the @nx/angular plugin to dependencies when --mfType=host', async () => { + updateJson(tree, 'package.json', (json) => ({ + ...json, + devDependencies: { + ...json.devDependencies, + '@nx/angular': nxVersion, + }, + })); + + await setupMf(tree, { appName: 'app1', mfType: 'host' }); + + const { devDependencies, dependencies } = readJson(tree, 'package.json'); + expect(devDependencies['@nx/angular']).toBeUndefined(); + expect(dependencies['@nx/angular']).toBe(nxVersion); + }); + + it('should move the @nx/angular plugin to dependencies when --federationType=dynamic', async () => { + updateJson(tree, 'package.json', (json) => ({ + ...json, + devDependencies: { + ...json.devDependencies, + '@nx/angular': nxVersion, + }, + })); + + await setupMf(tree, { + appName: 'app1', + mfType: 'remote', + federationType: 'dynamic', + }); + + const { devDependencies, dependencies } = readJson(tree, 'package.json'); + expect(devDependencies['@nx/angular']).toBeUndefined(); + expect(dependencies['@nx/angular']).toBe(nxVersion); + }); + describe('angular compat support', () => { beforeEach(() => { updateJson(tree, 'package.json', (json) => ({ diff --git a/packages/angular/src/generators/setup-mf/setup-mf.ts b/packages/angular/src/generators/setup-mf/setup-mf.ts index 886da7eb8282f..5637e1cd9549d 100644 --- a/packages/angular/src/generators/setup-mf/setup-mf.ts +++ b/packages/angular/src/generators/setup-mf/setup-mf.ts @@ -1,11 +1,13 @@ -import type { Tree } from '@nx/devkit'; import { addDependenciesToPackageJson, formatFiles, readProjectConfiguration, + type Tree, } from '@nx/devkit'; -import type { Schema } from './schema'; - +import { + moduleFederationEnhancedVersion, + nxVersion, +} from '../../utils/versions'; import { addCypressOnErrorWorkaround, addRemoteEntry, @@ -14,18 +16,16 @@ import { fixBootstrap, generateWebpackConfig, getRemotesWithPorts, + moveAngularPluginToDependencies, normalizeOptions, removeDeadCodeFromRemote, setupHostIfDynamic, - setupTspathForRemote, setupServeTarget, + setupTspathForRemote, updateHostAppRoutes, updateTsConfig, } from './lib'; -import { - moduleFederationEnhancedVersion, - nxVersion, -} from '../../utils/versions'; +import type { Schema } from './schema'; export async function setupMf(tree: Tree, rawOptions: Schema) { const options = normalizeOptions(tree, rawOptions); @@ -88,6 +88,15 @@ export async function setupMf(tree: Tree, rawOptions: Schema) { fixBootstrap(tree, projectConfig.root, options); + if (options.mfType === 'host' || options.federationType === 'dynamic') { + /** + * Host applications and dynamic federation applications generate runtime + * code that depends on the @nx/angular plugin. Ensure that the plugin is + * in the production dependencies. + */ + moveAngularPluginToDependencies(tree); + } + if (!options.skipE2E) { addCypressOnErrorWorkaround(tree, options); } diff --git a/packages/workspace/src/generators/new/generate-preset.ts b/packages/workspace/src/generators/new/generate-preset.ts index a5547763eea41..125cbe43a4b64 100644 --- a/packages/workspace/src/generators/new/generate-preset.ts +++ b/packages/workspace/src/generators/new/generate-preset.ts @@ -103,9 +103,10 @@ function getPresetDependencies({ case Preset.AngularMonorepo: case Preset.AngularStandalone: return { - dependencies: { '@nx/angular': nxVersion }, + dependencies: {}, dev: { '@angular-devkit/core': angularCliVersion, + '@nx/angular': nxVersion, typescript: typescriptVersion, }, }; diff --git a/packages/workspace/src/generators/new/new.spec.ts b/packages/workspace/src/generators/new/new.spec.ts index fdd83c475d84b..b8503f0059b7e 100644 --- a/packages/workspace/src/generators/new/new.spec.ts +++ b/packages/workspace/src/generators/new/new.spec.ts @@ -168,9 +168,9 @@ describe('new', () => { tree, 'my-workspace/package.json' ); - expect(dependencies).toStrictEqual({ '@nx/angular': nxVersion }); expect(devDependencies).toStrictEqual({ '@angular-devkit/core': angularCliVersion, + '@nx/angular': nxVersion, '@nx/workspace': nxVersion, nx: nxVersion, typescript: typescriptVersion,