fix(angular): init also installs plugin

nrwl · Sep 16, 2024 · bc6b179 · bc6b179
1 parent 89aa6d4
commit bc6b179
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 59 deletions.
diff --git a/e2e/nx/src/import.test.ts b/e2e/nx/src/import.test.ts
@@ -4,6 +4,7 @@ import {
   getSelectedPackageManager,
   newProject,
   runCLI,
+  runCommand,
   updateJson,
   updateFile,
   e2eCwd,
@@ -38,7 +39,11 @@ describe('Nx Import', () => {
     try {
       rmdirSync(join(tempImportE2ERoot));
     } catch {}
+
+    runCommand(`git add .`);
+    runCommand(`git commit -am "Update" --allow-empty`);
   });
+
   afterAll(() => cleanupProject());
 
   it('should be able to import a vite app', () => {
@@ -69,6 +74,9 @@ describe('Nx Import', () => {
       // This fails if git is already configured to have `main` branch, but that's OK
     }
 
+    //TODO(jack): remove this
+    console.log('>>>>', execSync('git status --porcelain').toString());
+
     const remote = tempViteProjectPath;
     const ref = 'main';
     const source = '.';
@@ -111,21 +119,24 @@ describe('Nx Import', () => {
     });
     mkdirSync(join(repoPath, 'packages/a'), { recursive: true });
     writeFileSync(join(repoPath, 'packages/a/README.md'), `# A`);
-    execSync(`git add packages/a`, {
+    execSync(`git add *`, {
       cwd: repoPath,
     });
     execSync(`git commit -m "add package a"`, {
       cwd: repoPath,
     });
     mkdirSync(join(repoPath, 'packages/b'), { recursive: true });
     writeFileSync(join(repoPath, 'packages/b/README.md'), `# B`);
-    execSync(`git add packages/b`, {
+    execSync(`git add *`, {
       cwd: repoPath,
     });
     execSync(`git commit -m "add package b"`, {
       cwd: repoPath,
     });
 
+    //TODO(jack): remove this
+    console.log('>>>>', execSync('git status --porcelain').toString());
+
     runCLI(
       `import ${repoPath} packages/a --ref main --source packages/a --no-interactive`,
       {

diff --git a/packages/angular/src/generators/init/init.ts b/packages/angular/src/generators/init/init.ts
@@ -1,13 +1,16 @@
 import {
   addDependenciesToPackageJson,
+  createProjectGraphAsync,
   ensurePackage,
   formatFiles,
+  type GeneratorCallback,
   logger,
   readNxJson,
-  type GeneratorCallback,
   type Tree,
 } from '@nx/devkit';
+import { addPlugin } from '@nx/devkit/src/utils/add-plugin';
 import { getInstalledPackageVersion, versions } from '../utils/version-utils';
+import { createNodesV2 } from '../../plugins/plugin';
 import { Schema } from './schema';
 
 export async function angularInitGenerator(
@@ -17,6 +20,25 @@ export async function angularInitGenerator(
   ignoreAngularCacheDirectory(tree);
   const installTask = installAngularDevkitCoreIfMissing(tree, options);
 
+  // For Angular inference plugin, we only want it during import since our
+  // generators do not use `angular.json`, and `nx init` should split
+  // `angular.json` into multiple `project.json` files -- as this is preferred
+  // by most folks we've talked to.
+  options.addPlugin ??= process.env.NX_RUNNING_NX_IMPORT === 'true';
+
+  if (options.addPlugin) {
+    await addPlugin(
+      tree,
+      await createProjectGraphAsync(),
+      '@nx/angular/plugin',
+      createNodesV2,
+      {
+        targetNamePrefix: ['', 'angular:', 'angular-'],
+      },
+      options.updatePackageScripts
+    );
+  }
+
   if (!options.skipFormat) {
     await formatFiles(tree);
   }

diff --git a/packages/angular/src/generators/init/schema.d.ts b/packages/angular/src/generators/init/schema.d.ts
@@ -3,4 +3,7 @@ export interface Schema {
   skipInstall?: boolean;
   skipPackageJson?: boolean;
   keepExistingVersions?: boolean;
+  /* internal */
+  addPlugin?: boolean;
+  updatePackageScripts?: boolean;
 }
diff --git a/packages/angular/src/plugins/plugin.spec.ts b/packages/angular/src/plugins/plugin.spec.ts
@@ -96,7 +96,7 @@ describe('@nx/angular/plugin', () => {
                 "targets": {
                   "build": {
                     "cache": true,
-                    "command": "ng run my-app:build",
+                    "command": "ng build",
                     "dependsOn": [
                       "^build",
                     ],
@@ -131,7 +131,7 @@ describe('@nx/angular/plugin', () => {
                     ],
                   },
                   "serve": {
-                    "command": "ng run my-app:serve",
+                    "command": "ng serve",
                     "configurations": {
                       "production": {
                         "command": "ng run my-app:serve:production",
@@ -157,7 +157,7 @@ describe('@nx/angular/plugin', () => {
                   },
                   "test": {
                     "cache": true,
-                    "command": "ng run my-app:test",
+                    "command": "ng test",
                     "inputs": [
                       "default",
                       "^production",
@@ -197,7 +197,7 @@ describe('@nx/angular/plugin', () => {
                 "targets": {
                   "build": {
                     "cache": true,
-                    "command": "ng run my-lib:build",
+                    "command": "ng build",
                     "dependsOn": [
                       "^build",
                     ],
@@ -233,7 +233,7 @@ describe('@nx/angular/plugin', () => {
                   },
                   "test": {
                     "cache": true,
-                    "command": "ng run my-lib:test",
+                    "command": "ng test",
                     "inputs": [
                       "default",
                       "^production",
@@ -394,7 +394,7 @@ describe('@nx/angular/plugin', () => {
                 "targets": {
                   "build": {
                     "cache": true,
-                    "command": "ng run org1-app1:build",
+                    "command": "ng build",
                     "dependsOn": [
                       "^build",
                     ],
@@ -429,7 +429,7 @@ describe('@nx/angular/plugin', () => {
                     ],
                   },
                   "serve": {
-                    "command": "ng run org1-app1:serve",
+                    "command": "ng serve",
                     "configurations": {
                       "production": {
                         "command": "ng run org1-app1:serve:production",
@@ -455,7 +455,7 @@ describe('@nx/angular/plugin', () => {
                   },
                   "test": {
                     "cache": true,
-                    "command": "ng run org1-app1:test",
+                    "command": "ng test",
                     "inputs": [
                       "default",
                       "^production",
@@ -495,7 +495,7 @@ describe('@nx/angular/plugin', () => {
                 "targets": {
                   "build": {
                     "cache": true,
-                    "command": "ng run org1-lib1:build",
+                    "command": "ng build",
                     "dependsOn": [
                       "^build",
                     ],
@@ -531,7 +531,7 @@ describe('@nx/angular/plugin', () => {
                   },
                   "test": {
                     "cache": true,
-                    "command": "ng run org1-lib1:test",
+                    "command": "ng test",
                     "inputs": [
                       "default",
                       "^production",
@@ -578,7 +578,7 @@ describe('@nx/angular/plugin', () => {
                 "targets": {
                   "build": {
                     "cache": true,
-                    "command": "ng run org2-app1:build",
+                    "command": "ng build",
                     "dependsOn": [
                       "^build",
                     ],
@@ -613,7 +613,7 @@ describe('@nx/angular/plugin', () => {
                     ],
                   },
                   "serve": {
-                    "command": "ng run org2-app1:serve",
+                    "command": "ng serve",
                     "configurations": {
                       "production": {
                         "command": "ng run org2-app1:serve:production",
@@ -639,7 +639,7 @@ describe('@nx/angular/plugin', () => {
                   },
                   "test": {
                     "cache": true,
-                    "command": "ng run org2-app1:test",
+                    "command": "ng test",
                     "inputs": [
                       "default",
                       "^production",
@@ -679,7 +679,7 @@ describe('@nx/angular/plugin', () => {
                 "targets": {
                   "build": {
                     "cache": true,
-                    "command": "ng run org2-lib1:build",
+                    "command": "ng build",
                     "dependsOn": [
                       "^build",
                     ],
@@ -715,7 +715,7 @@ describe('@nx/angular/plugin', () => {
                   },
                   "test": {
                     "cache": true,
-                    "command": "ng run org2-lib1:test",
+                    "command": "ng test",
                     "inputs": [
                       "default",
                       "^production",

diff --git a/packages/angular/src/plugins/plugin.ts b/packages/angular/src/plugins/plugin.ts
@@ -20,6 +20,10 @@ import * as posix from 'node:path/posix';
 import { hashObject } from 'nx/src/devkit-internals';
 import { workspaceDataDirectory } from 'nx/src/utils/cache-directory';
 
+export interface AngularPluginOptions {
+  targetNamePrefix?: string;
+}
+
 type AngularProjects = Record<
   string,
   Pick<ProjectConfiguration, 'projectType' | 'sourceRoot' | 'targets'>
@@ -76,7 +80,7 @@ function writeProjectsToCache(
   writeJsonFile(cachePath, results);
 }
 
-export const createNodesV2: CreateNodesV2<{}> = [
+export const createNodesV2: CreateNodesV2<AngularPluginOptions> = [
   '**/angular.json',
   async (configFiles, options, context) => {
     const optionsHash = hashObject(options);
@@ -124,6 +128,7 @@ async function createNodesInternal(
 
   projectsCache[hash] ??= await buildAngularProjects(
     configFilePath,
+    options,
     angularWorkspaceRoot,
     context
   );
@@ -133,6 +138,7 @@ async function createNodesInternal(
 
 async function buildAngularProjects(
   configFilePath: string,
+  options: AngularPluginOptions,
   angularWorkspaceRoot: string,
   context: CreateNodesContextV2
 ): Promise<AngularProjects> {
@@ -156,11 +162,25 @@ async function buildAngularProjects(
 
     const namedInputs = getNamedInputs(project.root, context);
 
-    for (const [targetName, angularTarget] of Object.entries(projectTargets)) {
+    for (const [_targetName, angularTarget] of Object.entries(projectTargets)) {
+      const targetName = options?.targetNamePrefix
+        ? `${options.targetNamePrefix}${_targetName}`
+        : _targetName;
       const externalDependencies = ['@angular/cli'];
 
       targets[targetName] = {
-        command: `ng run ${projectName}:${targetName}`,
+        command:
+          // For targets that are also Angular CLI commands, infer the simplified form.
+          // Otherwise, use `ng run` to support non-command targets so that they will run.
+          targetName === 'build' ||
+          targetName === 'deploy' ||
+          targetName === 'extract-i18n' ||
+          targetName === 'e2e' ||
+          targetName === 'lint' ||
+          targetName === 'serve' ||
+          targetName === 'test'
+            ? `ng ${targetName}`
+            : `ng run ${projectName}:${targetName}`,
         options: { cwd: angularWorkspaceRoot },
         metadata: {
           technologies: ['angular'],