Description
Command
generate, add
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
I've noticed an issue where the Angular CLI doesn't seem to respect the default schematic settings defined in angular.json when certain third-party schematics, such as @cypress/schematic, are installed.
Current behavior
Given this configuration in angular.json:
"schematics": {
"@schematics/angular:component": {
"changeDetection": "OnPush",
"standalone": true,
"style": "scss"
}
}
When I generate a component before adding @cypress/schematic, everything works as expected:
ng generate component holi
Output:
CREATE src/app/holi/holi.component.scss
CREATE src/app/holi/holi.component.html
CREATE src/app/holi/holi.component.spec.ts
CREATE src/app/holi/holi.component.ts
holi.component.ts content:
import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
selector: 'app-holi',
standalone: true,
imports: [],
templateUrl: './holi.component.html',
styleUrl: './holi.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class HoliComponent {
}
However, after installing @cypress/schematic:
ng add @cypress/schematic --e2e --component
ng generate component holi-two --skip-import
The new component is created without SCSS, Standalone and OnPush:
CREATE src/app/holi-two/holi-two.component.css (0 bytes)
CREATE src/app/holi-two/holi-two.component.html (23 bytes)
CREATE src/app/holi-two/holi-two.component.ts (206 bytes)
CREATE src/app/holi-two/holi-two.component.cy.ts (161 bytes)
Temporary workaround
This behavior appears to be due to the order of schematic collections under the cli section in angular.json. Manually moving @schematics/angular to the top restores the expected behavior:
"cli": {
"schematicCollections": [
"@cypress/schematic",
"@angular-eslint/schematics",
"@schematics/angular"
]
}
To:
"cli": {
"schematicCollections": [
"@schematics/angular",
"@cypress/schematic",
"@angular-eslint/schematics"
]
}
There is an open issue in the Cypress repository (#25875) describing this same behavior. However, it seems that no fix has been implemented there yet, and the problem continues to affect developers relying on Angular CLI configurations.
Expected behavior
CLI-generated components should always apply the schematic preferences defined in angular.json, regardless of the presence or order of third-party schematic collections.
Node Version
v22.13.0
Angular CLI Version
18.2.4
Cypress Schematic Version
2.5.2
Minimal Reproduction
ng new testproject
cd testproject
ng generate component holi
ng add @cypress/schematic --e2e --component
ng generate component holi-two --skip-import
Exception or Error
Your Environment
Angular CLI: 18.2.15
Node: 22.13.0
Package Manager: npm 10.9.2
OS: linux x64
Angular: 18.2.13
... animations, common, compiler, compiler-cli, core, elements
... forms, localize, platform-browser, platform-browser-dynamic
... platform-server, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1902.4
@angular-devkit/build-angular 18.2.15
@angular-devkit/core 19.2.4
@angular-devkit/schematics 18.2.15
@angular/cli 18.2.15
@angular/ssr 18.2.15
@schematics/angular 18.2.15
rxjs 7.8.2
typescript 5.5.4
zone.js 0.14.10
Anything else relevant?
No response