Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 05d567b

Browse files
committed
feat(@angular/cli): add fallback support for packages without direct ng add functionality
When a user tries to `ng add` a package that doesn't provide its own `ng-add` schematic, the command will now check for a built-in schematic to use as a fallback. This improves the user experience for popular packages that do not have native Angular CLI support. The first package supported is `tailwindcss`.
1 parent 87ee258 commit 05d567b

File tree

2 files changed

+54
-2
lines changed

2 files changed

+54
-2
lines changed

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

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,17 @@ const packageVersionExclusions: Record<string, string | Range> = {
7575

7676
const DEFAULT_CONFLICT_DISPLAY_LIMIT = 5;
7777

78+
/**
79+
* A map of packages to built-in schematics.
80+
* This is used for packages that do not have a native `ng-add` schematic.
81+
*/
82+
const BUILT_IN_SCHEMATICS = {
83+
tailwindcss: {
84+
collection: '@schematics/angular',
85+
name: 'tailwind',
86+
},
87+
} as const;
88+
7889
export default class AddCommandModule
7990
extends SchematicsCommandModule
8091
implements CommandModuleImplementation<AddCommandArgs>
@@ -234,6 +245,25 @@ export default class AddCommandModule
234245
}
235246

236247
if (!result.hasSchematics) {
248+
// Fallback to a built-in schematic if the package does not have an `ng-add` schematic
249+
const packageName = result.packageIdentifier.name;
250+
if (packageName) {
251+
const builtInSchematic =
252+
BUILT_IN_SCHEMATICS[packageName as keyof typeof BUILT_IN_SCHEMATICS];
253+
if (builtInSchematic) {
254+
logger.info(
255+
`The ${color.blue(packageName)} package does not provide \`ng add\` actions.`,
256+
);
257+
logger.info('The Angular CLI will use built-in actions to add it to your project.');
258+
259+
return this.executeSchematic({
260+
...options,
261+
collection: builtInSchematic.collection,
262+
schematicName: builtInSchematic.name,
263+
});
264+
}
265+
}
266+
237267
let message = options.dryRun
238268
? 'The package does not provide any `ng add` actions, so no further actions would be taken.'
239269
: 'Package installed successfully. The package does not provide any `ng add` actions, so no further actions were taken.';
@@ -566,7 +596,7 @@ export default class AddCommandModule
566596
}
567597

568598
private executeSchematic(
569-
options: Options<AddCommandArgs> & OtherOptions,
599+
options: Options<AddCommandArgs> & OtherOptions&{schematicName?: string},
570600
): Promise<number | void> {
571601
const {
572602
verbose,
@@ -577,12 +607,13 @@ export default class AddCommandModule
577607
registry,
578608
defaults,
579609
collection: collectionName,
610+
schematicName,
580611
...schematicOptions
581612
} = options;
582613

583614
return this.runSchematic({
584615
schematicOptions,
585-
schematicName: this.schematicName,
616+
schematicName: schematicName??this.schematicName,
586617
collectionName,
587618
executionOptions: {
588619
interactive,
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { expectFileToExist, expectFileToMatch } from '../../../utils/fs';
2+
import { uninstallPackage } from '../../../utils/packages';
3+
import { ng } from '../../../utils/process';
4+
5+
export default async function () {
6+
try {
7+
await ng('add', 'tailwindcss', '--skip-confirmation');
8+
await expectFileToExist('.postcssrc.json');
9+
await expectFileToMatch('src/styles.css', /@import"tailwindcss";/);
10+
await expectFileToMatch('package.json', /"tailwindcss":/);
11+
await expectFileToMatch('package.json', /"@tailwindcss\/postcss":/);
12+
await expectFileToMatch('package.json', /"postcss":/);
13+
14+
// Ensure the project builds
15+
await ng('build', '--configuration=development');
16+
} finally {
17+
await uninstallPackage('tailwindcss');
18+
await uninstallPackage('@tailwindcss/postcss');
19+
await uninstallPackage('postcss');
20+
}
21+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /