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 fdb9d8d

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 4c551e9 commit fdb9d8d

File tree

2 files changed

+47
-2
lines changed

2 files changed

+47
-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>
@@ -229,6 +240,25 @@ export default class AddCommandModule
229240
}
230241

231242
if (!result.hasSchematics) {
243+
// Fallback to a built-in schematic if the package does not have an `ng-add` schematic
244+
const packageName = result.packageIdentifier.name;
245+
if (packageName) {
246+
const builtInSchematic =
247+
BUILT_IN_SCHEMATICS[packageName as keyof typeof BUILT_IN_SCHEMATICS];
248+
if (builtInSchematic) {
249+
logger.info(
250+
`The ${color.blue(packageName)} package does not provide \`ng add\` actions.`,
251+
);
252+
logger.info('The Angular CLI will use built-in actions to add it to your project.');
253+
254+
return this.executeSchematic({
255+
...options,
256+
collection: builtInSchematic.collection,
257+
schematicName: builtInSchematic.name,
258+
});
259+
}
260+
}
261+
232262
let message = options.dryRun
233263
? 'The package does not provide any `ng add` actions, so no further actions would be taken.'
234264
: 'Package installed successfully. The package does not provide any `ng add` actions, so no further actions were taken.';
@@ -561,7 +591,7 @@ export default class AddCommandModule
561591
}
562592

563593
private executeSchematic(
564-
options: Options<AddCommandArgs> & OtherOptions,
594+
options: Options<AddCommandArgs> & OtherOptions&{schematicName?: string},
565595
): Promise<number | void> {
566596
const {
567597
verbose,
@@ -572,12 +602,13 @@ export default class AddCommandModule
572602
registry,
573603
defaults,
574604
collection: collectionName,
605+
schematicName,
575606
...schematicOptions
576607
} = options;
577608

578609
return this.runSchematic({
579610
schematicOptions,
580-
schematicName: this.schematicName,
611+
schematicName: schematicName??this.schematicName,
581612
collectionName,
582613
executionOptions: {
583614
interactive,
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { expectFileToExist, expectFileToMatch } from '../../../utils/fs';
2+
import { ng } from '../../../utils/process';
3+
4+
export default async function () {
5+
await ng('add', 'tailwindcss', '--skip-confirmation');
6+
await expectFileToExist('.postcssrc.json');
7+
await expectFileToMatch('src/styles.css', /@import"tailwindcss";/);
8+
await expectFileToMatch('package.json', /"tailwindcss":/);
9+
await expectFileToMatch('package.json', /"@tailwindcss\/postcss":/);
10+
await expectFileToMatch('package.json', /"postcss":/);
11+
12+
// Ensure the project builds
13+
await ng('build', '--configuration=development');
14+
}

0 commit comments

Comments
(0)

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