Ionic 7 + Angular 15执行ionic generate page auth报TS2304错误

问题原因 #

Angular 14及以后版本中，测试模块里的async()辅助函数已被废弃，但Ionic旧版本的页面生成模板仍在使用该函数，导致TypeScript报错“Cannot find name 'async'”。

临时修复现有页面的spec文件 #

找到报错的{pagename}.page.spec.ts文件，将旧的测试代码替换为以下两种方案之一：

方案1：使用原生async/await（推荐） #

修改beforeEach部分的代码：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AuthPage } from './auth.page';

describe('AuthPage', () => {
  let component: AuthPage;
  let fixture: ComponentFixture<AuthPage>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AuthPage]
    }).compileComponents();

    fixture = TestBed.createComponent(AuthPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

方案2：使用fakeAsync和tick() #

如果需要处理异步操作，可采用此方案：

import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { AuthPage } from './auth.page';

describe('AuthPage', () => {
  let component: AuthPage;
  let fixture: ComponentFixture<AuthPage>;

  beforeEach(fakeAsync(() => {
    TestBed.configureTestingModule({
      declarations: [AuthPage]
    }).compileComponents();
    tick();

    fixture = TestBed.createComponent(AuthPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

彻底解决后续生成页面的问题 #

1. 更新Ionic Angular工具包 #

执行命令更新@ionic/angular-toolkit到最新版本，该包负责提供页面生成模板：

npm install @ionic/angular-toolkit@latest --save-dev

2. 手动修改模板（若更新后仍有问题） #

如果更新工具包后模板未同步，可手动修改模板文件：
找到项目根目录下node_modules/@ionic/angular-toolkit/generators/page/files/src/app/__path__/__name@dasherize__/__name@dasherize__.page.spec.ts.template文件，将其中的async(() => {替换为async () => {，后续生成的页面将自动使用正确的语法。

内容的提问来源于stack exchange，提问作者Laurence MacNeill