Skip to content

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

Open
@YoannRu

Description

@YoannRu

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:
      TestBed.configureTestingModule({
        declarations: [TestComponent],
        imports: [IonicModule.forRoot()]
      }).compileComponents();
      rather than the standalone pattern:
      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:
    TestBed.configureTestingModule({
      imports: [TestComponent],
    }).compileComponents();

Reproduction Steps

  1. Create a new Ionic + Angular 19 project:
    ionic start myApp blank --type=angular
    cd myApp
    npm install @ionic/angular-toolkit@latest
  2. Case A: Add to angular.json:
    "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:
    "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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions