fix(@angular/cli): add packages with built-in schematics to devDependencies only

When running `ng add` on a package that does not provide a native `ng-add` schematic but is handled by a built-in schematic (e.g. `tailwindcss` or `@vitest/browser-*`), the CLI previously installed the package into `dependencies` before executing the built-in schematic.

With this change, built-in schematics specify their target dependency section (`devDependencies`), so `ng add` installs them as `devDependencies` and omits them from `dependencies`.

Closes #33701

Author: alan-agius4

packages/angular/cli/src/commands/add/cli.ts

@@ -224,12 +224,29 @@ export default class AddCommandModule
         {
           title: 'Confirming installation',
           enabled: !skipConfirmation && !options.dryRun,
+          skip: (context) => {
+            if (context.hasSchematics) {
+              return false;
+            }
+
+            return `The ${color.blue(context.packageIdentifier.toString())} package does not provide \`ng add\` actions.`;
+          },
           task: (context, task) => this.confirmInstallationTask(context, task),
           rendererOptions: { persistentOutput: true },
         },
         {
           title: 'Installing package',
           skip: (context) => {
+            if (!context.hasSchematics) {
+              const builtInSchematic =
+                BUILT_IN_SCHEMATICS[
+                  context.packageIdentifier.name as keyof typeof BUILT_IN_SCHEMATICS
+                ];
+              if (builtInSchematic) {
+                return `Skipping package installation.`;
+              }
+            }
+
             if (context.dryRun) {
               return `Skipping package installation. Would install package ${color.blue(
                 context.packageIdentifier.toString(),
@@ -243,9 +260,7 @@ export default class AddCommandModule
         },
         // TODO: Rework schematic execution as a task and insert here
       ],
-      {
-        /* options */
-      },
+      {/* options */},
     );
 
     try {
@@ -290,9 +305,6 @@ export default class AddCommandModule
           const builtInSchematic =
             BUILT_IN_SCHEMATICS[packageName as keyof typeof BUILT_IN_SCHEMATICS];
           if (builtInSchematic) {
-            logger.info(
-              `The ${color.blue(packageName)} package does not provide \`ng add\` actions.`,
-            );
             logger.info('The Angular CLI will use built-in actions to add it to your project.');
 
             return this.executeSchematic({

tests/e2e/tests/commands/add/add-tailwindcss.ts

@@ -1,4 +1,5 @@
-import { expectFileToExist, expectFileToMatch, rimraf } from '../../../utils/fs';
+import assert from 'node:assert';
+import { expectFileToExist, expectFileToMatch, readFile, rimraf } from '../../../utils/fs';
 import { getActivePackageManager, uninstallPackage } from '../../../utils/packages';
 import { ng } from '../../../utils/process';
 
@@ -14,9 +15,19 @@ export default async function () {
     await ng('add', 'tailwindcss', '--skip-confirmation');
     await expectFileToExist('.postcssrc.json');
     await expectFileToMatch('src/styles.css', /@import 'tailwindcss';/);
-    await expectFileToMatch('package.json', /"tailwindcss":/);
-    await expectFileToMatch('package.json', /"@tailwindcss\/postcss":/);
-    await expectFileToMatch('package.json', /"postcss":/);
+
+    const { dependencies, devDependencies } = JSON.parse(await readFile('package.json'));
+    assert.strictEqual(
+      dependencies?.tailwindcss,
+      undefined,
+      'tailwindcss should not be added to dependencies.',
+    );
+    assert.ok(devDependencies?.tailwindcss, 'tailwindcss should be added to devDependencies.');
+    assert.ok(
+      devDependencies?.['@tailwindcss/postcss'],
+      '@tailwindcss/postcss should be added to devDependencies.',
+    );
+    assert.ok(devDependencies?.postcss, 'postcss should be added to devDependencies.');
 
     // Ensure the project builds
     await ng('build', '--configuration=development');

tests/e2e/tests/commands/add/add-vitest-browser.ts

@@ -1,4 +1,5 @@
-import { expectFileToMatch } from '../../../utils/fs';
+import assert from 'node:assert';
+import { expectFileToMatch, readFile } from '../../../utils/fs';
 import { uninstallPackage } from '../../../utils/packages';
 import { ng } from '../../../utils/process';
 import { applyVitestBuilder } from '../../../utils/vitest';
@@ -9,8 +10,18 @@ export default async function () {
   try {
     await ng('add', '@vitest/browser-playwright', '--skip-confirmation');
 
-    await expectFileToMatch('package.json', /"@vitest\/browser-playwright":/);
-    await expectFileToMatch('package.json', /"playwright":/);
+    const { dependencies, devDependencies } = JSON.parse(await readFile('package.json'));
+    assert.strictEqual(
+      dependencies?.['@vitest/browser-playwright'],
+      undefined,
+      '@vitest/browser-playwright should not be added to dependencies.',
+    );
+    assert.ok(
+      devDependencies?.['@vitest/browser-playwright'],
+      '@vitest/browser-playwright should be added to devDependencies.',
+    );
+    assert.ok(devDependencies?.playwright, 'playwright should be added to devDependencies.');
+
     await expectFileToMatch('tsconfig.spec.json', /"vitest\/globals"/);
     await expectFileToMatch('tsconfig.spec.json', /"@vitest\/browser-playwright"/);
   } finally {