ionic-team / ionic-team/angular-toolkit

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

Open
#521 1 comment 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
73
Forks
34
Avg merge
6m
Merged PRs (30d)
5

Description

## 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.