ionic-team / ionic-team/angular-toolkit

Component schematic adds redundant standalone flag and reverts to legacy `.spec.ts` when flag is removed

Offen
#521 1 Kommentar 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
73
Forks
34
Ø Merge
6 Min.
Gemergte PRs (30 T.)
5

Beschreibung

## Description

With Angular 19, components are standalone by default and do not require an explicit `standalone: true` flag. The `@ionic/angular-toolkit:component` schematic exhibits two inconsistent behaviors:

1. **With `"standalone": true` in `angular.json` schematics**
- The generated component and test scaffold are correct for standalone usage.
- **However**, the component decorator still includes `standalone: true` explicitly, which is redundant in Angular 19.

2. **Without the `standalone` option in schematics**
- The generated component decorator omits `standalone: true` (correct).
- The generated test `.spec.ts` falls back to the legacy NgModule-based pattern:
```ts
TestBed.configureTestingModule({
declarations: [TestComponent],
imports: [IonicModule.forRoot()]
}).compileComponents();
```
rather than the standalone pattern:
```ts
TestBed.configureTestingModule({
imports: [TestComponent],
}).compileComponents();
```

This inconsistency forces maintainers to either keep a redundant flag in their code or manually update specs.

---

## Current Behavior

- **With** `standalone: true` in schematics:
- Component decorator contains `standalone: true`.
- Test spec uses standalone-compatible setup.
- **Without** `standalone` in schematics:
- Component decorator is correct (no `standalone`).
- Test spec uses `declarations` and `IonicModule.forRoot()`, i.e., NgModule-based.

---

## Expected Behavior

- The schematic should **not** inject `standalone: true` in the component decorator (Angular 19 default).
- The `.spec.ts` should consistently use the standalone testing pattern, regardless of the schematics `standalone` setting:
```ts
TestBed.configureTestingModule({
imports: [TestComponent],
}).compileComponents();
```

---

## Reproduction Steps

1. Create a new Ionic + Angular 19 project:
```bash
ionic start myApp blank --type=angular
cd myApp
npm install @ionic/angular-toolkit@latest
```
2. **Case A:** Add to `angular.json`:
```jsonc
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss",
"standalone": true
}
}
```
- Run `ionic generate component test`
- Observe redundant `standalone: true` in `test.component.ts`.
3. **Case B:** Remove the `standalone` option:
```jsonc
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
}
}
```
- Run `ionic generate component test`
- Observe legacy NgModule-based test in `test.component.spec.ts`.

---

## Environment

- **@ionic/angular:** 8.5.5
- **@ionic/angular-toolkit:** 12.2.0
- **Angular CLI:** 19.2

---

Thank you for looking into this! Please let me know if you need further details.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Start at the @ionic/angular-toolkit:component schematic entry point and inspect how it generates the component and .spec.ts files for both standalone settings. Compare the generated decorator and TestBed setup with the expected Angular 19 patterns; done means no redundant standalone flag and imports-based standalone testing in both cases.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
testing, tooling
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.