fix(angular): ensure peer deps are installed when initializing the pl…

…ugin (#14906) Co-authored-by: Leosvel Pérez Espinosa <leosvel.perez.espinosa@gmail.com> (cherry picked from commit 032efc2)
nrwl · Feb 15, 2023 · 27e43d0 · 27e43d0
1 parent 7954426
commit 27e43d0
Show file tree

Hide file tree

Showing 46 changed files with 134 additions and 103 deletions.
diff --git a/e2e/angular-core/src/angular-linting.test.ts b/e2e/angular-core/src/angular-linting.test.ts
@@ -1,6 +1,6 @@
 import {
   cleanupProject,
-  newAngularProject,
+  newProject,
   runCLI,
   uniq,
   updateFile,
@@ -9,7 +9,7 @@ import * as path from 'path';
 
 describe('Angular Package', () => {
   describe('linting', () => {
-    beforeAll(() => newAngularProject());
+    beforeAll(() => newProject());
     afterAll(() => cleanupProject());
 
     it('should support eslint and pass linting on the standard generated code', async () => {

diff --git a/e2e/angular-core/src/config.test.ts b/e2e/angular-core/src/config.test.ts
@@ -1,7 +1,7 @@
 import {
   cleanupProject,
   expectTestsPass,
-  newAngularProject,
+  newProject,
   readJson,
   runCLI,
   runCLIAsync,
@@ -10,7 +10,7 @@ import {
 } from '@nrwl/e2e/utils';
 
 describe('Angular Config', () => {
-  beforeAll(() => newAngularProject());
+  beforeAll(() => newProject());
   afterAll(() => cleanupProject());
 
   it('should upgrade the config correctly', async () => {

diff --git a/e2e/angular-core/src/module-federation.test.ts b/e2e/angular-core/src/module-federation.test.ts
@@ -1,6 +1,6 @@
 import {
   cleanupProject,
-  newAngularProject,
+  newProject,
   promisifiedTreeKill,
   readProjectConfig,
   runCLI,
@@ -16,7 +16,7 @@ import { names } from '@nrwl/devkit';
 describe('Angular Projects', () => {
   let proj: string;
 
-  beforeAll(() => (proj = newAngularProject()));
+  beforeAll(() => (proj = newProject()));
   afterAll(() => cleanupProject());
 
   it('should serve the host and remote apps successfully, even with a shared library with a secondary entry point between them', async () => {

diff --git a/e2e/angular-core/src/projects.test.ts b/e2e/angular-core/src/projects.test.ts
@@ -3,7 +3,7 @@ import {
   cleanupProject,
   getSize,
   killPorts,
-  newAngularProject,
+  newProject,
   promisifiedTreeKill,
   readFile,
   runCLI,
@@ -20,7 +20,7 @@ import { names } from '@nrwl/devkit';
 describe('Angular Projects', () => {
   let proj: string;
 
-  beforeAll(() => (proj = newAngularProject()));
+  beforeAll(() => (proj = newProject()));
   afterAll(() => cleanupProject());
 
   it('should generate an app, a lib, link them, build, serve and test both correctly', async () => {

diff --git a/e2e/angular-extensions/src/cypress-component-tests.test.ts b/e2e/angular-extensions/src/cypress-component-tests.test.ts
@@ -2,7 +2,7 @@ import {
   checkFilesDoNotExist,
   cleanupProject,
   createFile,
-  newAngularProject,
+  newProject,
   runCLI,
   uniq,
   updateFile,
@@ -17,7 +17,7 @@ describe('Angular Cypress Component Tests', () => {
   const buildableLibName = uniq('cy-angular-buildable-lib');
 
   beforeAll(async () => {
-    projectName = newAngularProject({ name: uniq('cy-ng') });
+    projectName = newProject({ name: uniq('cy-ng') });
     runCLI(`generate @nrwl/angular:app ${appName} --no-interactive`);
     runCLI(
       `generate @nrwl/angular:component fancy-component --project=${appName} --no-interactive`

diff --git a/e2e/angular-extensions/src/misc.test.ts b/e2e/angular-extensions/src/misc.test.ts
@@ -1,9 +1,4 @@
-import {
-  cleanupProject,
-  newAngularProject,
-  runCLI,
-  uniq,
-} from '@nrwl/e2e/utils';
+import { cleanupProject, newProject, runCLI, uniq } from '@nrwl/e2e/utils';
 
 describe('Move Angular Project', () => {
   let proj: string;
@@ -12,7 +7,7 @@ describe('Move Angular Project', () => {
   let newPath: string;
 
   beforeAll(() => {
-    proj = newAngularProject();
+    proj = newProject();
     app1 = uniq('app1');
     app2 = uniq('app2');
     newPath = `subfolder/${app2}`;

diff --git a/e2e/angular-extensions/src/ngrx.test.ts b/e2e/angular-extensions/src/ngrx.test.ts
@@ -2,7 +2,7 @@ import {
   cleanupProject,
   expectTestsPass,
   getSelectedPackageManager,
-  newAngularProject,
+  newProject,
   readJson,
   runCLI,
   runCLIAsync,
@@ -12,7 +12,7 @@ import {
 describe('Angular Package', () => {
   describe('ngrx', () => {
     beforeAll(() => {
-      newAngularProject();
+      newProject();
     });
     afterAll(() => {
       cleanupProject();

diff --git a/e2e/angular-extensions/src/tailwind.test.ts b/e2e/angular-extensions/src/tailwind.test.ts
@@ -1,7 +1,7 @@
 import {
   cleanupProject,
   listFiles,
-  newAngularProject,
+  newProject,
   readFile,
   removeFile,
   runCLI,
@@ -117,7 +117,7 @@ describe('Tailwind support', () => {
   };
 
   beforeAll(() => {
-    project = newAngularProject();
+    project = newProject();
 
     // Create tailwind config in the workspace root
     createWorkspaceTailwindConfigFile();

diff --git a/e2e/jest/src/jest-root.test.ts b/e2e/jest/src/jest-root.test.ts
@@ -1,18 +1,12 @@
-import {
-  newAngularProject,
-  newProject,
-  runCLI,
-  runCLIAsync,
-  uniq,
-} from '@nrwl/e2e/utils';
+import { newProject, runCLI, runCLIAsync, uniq } from '@nrwl/e2e/utils';
 
 describe('Jest root projects', () => {
   const myapp = uniq('myapp');
   const mylib = uniq('mylib');
 
   describe('angular', () => {
     beforeAll(() => {
-      newAngularProject();
+      newProject();
     });
 
     it('should test root level app projects', async () => {

diff --git a/e2e/linter/src/linter.test.ts b/e2e/linter/src/linter.test.ts
@@ -3,7 +3,6 @@ import {
   checkFilesExist,
   cleanupProject,
   createFile,
-  newAngularProject,
   newProject,
   readFile,
   readJson,
@@ -186,7 +185,7 @@ describe('Linter', () => {
     }, 1000000);
 
     it('lint plugin should ensure module boundaries', () => {
-      const proj = newAngularProject();
+      const proj = newProject();
       const myapp = uniq('myapp');
       const myapp2 = uniq('myapp2');
       const mylib = uniq('mylib');
@@ -516,7 +515,7 @@ export function tslibC(): string {
       const myapp = uniq('myapp');
       const mylib = uniq('mylib');
 
-      newAngularProject();
+      newProject();
       runCLI(`generate @nrwl/angular:app ${myapp} --rootProject=true`);
 
       let rootEslint = readJson('.eslintrc.json');

diff --git a/e2e/nx-misc/src/misc.test.ts b/e2e/nx-misc/src/misc.test.ts
@@ -22,7 +22,7 @@ describe('Nx Commands', () => {
   afterAll(() => cleanupProject());
 
   describe('show', () => {
-    it('ttt should show the list of projects', () => {
+    it('should show the list of projects', () => {
       const app1 = uniq('myapp');
       const app2 = uniq('myapp');
       expect(runCLI('show projects')).toEqual('');

diff --git a/e2e/utils/index.ts b/e2e/utils/index.ts
@@ -368,21 +368,6 @@ export function newProject({
   }
 }
 
-export function newAngularProject({
-  name = uniq('proj'),
-  packageManager = getSelectedPackageManager(),
-} = {}): string {
-  const projScope = newProject({ name, packageManager });
-
-  const angularPackages = [
-    '@angular-devkit/core',
-    '@angular-devkit/schematics',
-    '@schematics/angular',
-  ];
-  packageInstall(angularPackages.join(` `), projScope, 'latest');
-  return projScope;
-}
-
 export function newLernaWorkspace({
   name = uniq('lerna-proj'),
   packageManager = getSelectedPackageManager(),

diff --git a/packages/angular/src/generators/application/angular-v14/application.ts b/packages/angular/src/generators/application/angular-v14/application.ts
@@ -4,7 +4,6 @@ import {
   moveFilesToNewDirectory,
   Tree,
 } from '@nrwl/devkit';
-import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter';
 import { UnitTestRunner } from '../../../utils/test-runners';
 import { angularInitGenerator } from '../../init/init';
 import { setupTailwindGenerator } from '../../setup-tailwind/setup-tailwind';
@@ -38,6 +37,7 @@ export async function applicationGenerator(
     skipFormat: true,
   });
 
+  const { wrapAngularDevkitSchematic } = require('@nrwl/devkit/ngcli-adapter');
   const angularAppSchematic = wrapAngularDevkitSchematic(
     '@schematics/angular',
     'application'

diff --git a/packages/angular/src/generators/application/angular-v14/lib/add-protractor.ts b/packages/angular/src/generators/application/angular-v14/lib/add-protractor.ts
@@ -1,9 +1,9 @@
 import type { Tree } from '@nrwl/devkit';
 import { joinPathFragments, moveFilesToNewDirectory } from '@nrwl/devkit';
-import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter';
 import type { NormalizedSchema } from './normalized-schema';
 
 export async function addProtractor(host: Tree, options: NormalizedSchema) {
+  const { wrapAngularDevkitSchematic } = require('@nrwl/devkit/ngcli-adapter');
   const protractorSchematic = wrapAngularDevkitSchematic(
     '@schematics/angular',
     'e2e'

diff --git a/packages/angular/src/generators/application/application.ts b/packages/angular/src/generators/application/application.ts
@@ -7,7 +7,6 @@ import {
   Tree,
   updateNxJson,
 } from '@nrwl/devkit';
-import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter';
 import { join } from 'path';
 import { UnitTestRunner } from '../../utils/test-runners';
 import { angularInitGenerator } from '../init/init';
@@ -63,6 +62,7 @@ export async function applicationGenerator(
     skipFormat: true,
   });
 
+  const { wrapAngularDevkitSchematic } = require('@nrwl/devkit/ngcli-adapter');
   const angularAppSchematic = wrapAngularDevkitSchematic(
     '@schematics/angular',
     'application'

diff --git a/packages/angular/src/generators/application/lib/add-protractor.ts b/packages/angular/src/generators/application/lib/add-protractor.ts
@@ -1,9 +1,9 @@
 import type { Tree } from '@nrwl/devkit';
 import { joinPathFragments, moveFilesToNewDirectory } from '@nrwl/devkit';
-import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter';
 import type { NormalizedSchema } from './normalized-schema';
 
 export async function addProtractor(host: Tree, options: NormalizedSchema) {
+  const { wrapAngularDevkitSchematic } = require('@nrwl/devkit/ngcli-adapter');
   const protractorSchematic = wrapAngularDevkitSchematic(
     '@schematics/angular',
     'e2e'

diff --git a/packages/angular/src/generators/component/component.ts b/packages/angular/src/generators/component/component.ts
@@ -6,7 +6,6 @@ import {
   readProjectConfiguration,
   stripIndents,
 } from '@nrwl/devkit';
-import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter';
 import { pathStartsWith } from '../utils/path';
 import { exportComponentInEntryPoint } from './lib/component';
 import { normalizeOptions } from './lib/normalize-options';
@@ -30,6 +29,7 @@ export async function componentGenerator(tree: Tree, rawOptions: Schema) {
 
   checkPathUnderProjectRoot(tree, options);
 
+  const { wrapAngularDevkitSchematic } = require('@nrwl/devkit/ngcli-adapter');
   const angularComponentSchematic = wrapAngularDevkitSchematic(
     '@schematics/angular',
     'component'

diff --git a/packages/angular/src/generators/init/angular-v14/init.ts b/packages/angular/src/generators/init/angular-v14/init.ts
@@ -1,5 +1,6 @@
 import { cypressInitGenerator } from '@nrwl/cypress';
 import {
+  ensurePackage,
   formatFiles,
   GeneratorCallback,
   logger,
@@ -26,6 +27,23 @@ export async function angularInitGenerator(
   const options = normalizeOptions(rawOptions);
   setDefaults(host, options);
 
+  const peerDepsToInstall = [
+    '@angular-devkit/core',
+    '@angular-devkit/schematics',
+    '@schematics/angular',
+  ];
+  let devkitVersion: string;
+  peerDepsToInstall.forEach((pkg) => {
+    const packageVersion = getInstalledPackageVersion(host, pkg);
+
+    if (!packageVersion) {
+      devkitVersion ??=
+        getInstalledPackageVersion(host, '@angular-devkit/build-angular') ??
+        backwardCompatibleVersions.angularV14.angularDevkitVersion;
+      ensurePackage(host, pkg, devkitVersion);
+    }
+  });
+
   const depsTask = !options.skipPackageJson
     ? updateDependencies(host)
     : () => {};

diff --git a/packages/angular/src/generators/init/init.spec.ts b/packages/angular/src/generators/init/init.spec.ts
@@ -1,3 +1,22 @@
+jest.mock('@nrwl/devkit', () => ({
+  ...jest.requireActual('@nrwl/devkit'),
+  // need to mock so it doesn't resolve what the workspace has installed
+  // and be able to test with different versions
+  ensurePackage: jest.fn().mockImplementation((tree, pkg, version, options) => {
+    updateJson(tree, 'package.json', (json) => ({
+      ...json,
+      dependencies: {
+        ...json.dependencies,
+        ...(options?.dev === false ? { [pkg]: version } : {}),
+      },
+      devDependencies: {
+        ...json.devDependencies,
+        ...(options?.dev ?? true ? { [pkg]: version } : {}),
+      },
+    }));
+  }),
+}));
+
 import { NxJsonConfiguration, readJson, Tree, updateJson } from '@nrwl/devkit';
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
 import { Linter } from '@nrwl/linter';

diff --git a/packages/angular/src/generators/init/init.ts b/packages/angular/src/generators/init/init.ts
@@ -1,5 +1,6 @@
 import { cypressInitGenerator } from '@nrwl/cypress';
 import {
+  ensurePackage,
   formatFiles,
   GeneratorCallback,
   logger,
@@ -48,6 +49,23 @@ export async function angularInitGenerator(
     return;
   }
 
+  const peerDepsToInstall = [
+    '@angular-devkit/core',
+    '@angular-devkit/schematics',
+    '@schematics/angular',
+  ];
+  let devkitVersion: string;
+  peerDepsToInstall.forEach((pkg) => {
+    const packageVersion = getInstalledPackageVersion(tree, pkg);
+
+    if (!packageVersion) {
+      devkitVersion ??=
+        getInstalledPackageVersion(tree, '@angular-devkit/build-angular') ??
+        angularDevkitVersion;
+      ensurePackage(tree, pkg, devkitVersion);
+    }
+  });
+
   const options = normalizeOptions(rawOptions);
   setDefaults(tree, options);