Type-only imports破坏Angular依赖注入，如何在Angular中正常使用？

TypeScript的type-only import会在编译为JavaScript的阶段被完全擦除，不会保留任何运行时代码。而Angular的依赖注入系统需要依赖运行时可用的注入token来解析依赖，当你直接把type-only导入的类型作为构造函数参数的类型标注时，Angular编译器会尝试把这个类型当做注入token使用，但此时该类型已经被擦除，因此抛出错误。

方案1：直接改为常规导入（最简单通用） #

如果没有强制要求必须使用type-only import，直接去掉type修饰符即可，无需修改其他代码：

import { ChangeDetectorRef } from '@angular/core';

@Component({
    templateUrl: './popup.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class Component implements OnInit {
  constructor(
    private readonly changeDetectorRef: ChangeDetectorRef
  ) {}
}

方案2：拆分类型导入和注入token导入（需保留type-only场景适用） #

将运行时需要用到的注入token单独做常规导入，类型可以用type-only导入重命名避免冲突，适合需要严格区分类型和运行时依赖的场景：

// 类型用type-only导入，重命名避免和运行时token冲突
import type { ChangeDetectorRef as ChangeDetectorRefType } from '@angular/core';
// 运行时注入token用常规导入
import { ChangeDetectorRef } from '@angular/core';

@Component({
    templateUrl: './popup.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class Component implements OnInit {
  constructor(
    private readonly changeDetectorRef: ChangeDetectorRefType
  ) {}
}

方案3：使用inject()函数分离注入逻辑和类型标注（Angular 14及以上版本适用） #

不需要在构造函数里声明依赖，直接在类属性处完成注入，类型标注可以直接用type-only导入的类型，运行时注入用单独导入的token：

// 类型用type-only导入
import type { ChangeDetectorRef } from '@angular/core';
// 仅导入运行时需要的inject函数和对应的注入token
import { inject, ChangeDetectorRef as CDR_INJECT_TOKEN } from '@angular/core';

@Component({
    templateUrl: './popup.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class Component implements OnInit {
  private readonly changeDetectorRef: ChangeDetectorRef = inject(CDR_INJECT_TOKEN);
}

方案4：自定义注入Token配合type-only导入（适合自定义接口类型依赖） #

如果依赖是自定义的接口类型，没有对应的运行时类作为注入token，可以搭配自定义InjectionToken使用：

// 服务定义文件
export interface IUserService {
  getUserInfo(): UserInfo;
}
export const USER_SERVICE = new InjectionToken<IUserService>('USER_SERVICE');

// 组件文件
import type { IUserService } from './user.service';
import { USER_SERVICE } from './user.service';

@Component({
  // ...
  providers: [
    {
      provide: USER_SERVICE,
      useClass: UserServiceImpl
    }
  ]
})
export class Component {
  constructor(
    @Inject(USER_SERVICE) private readonly userService: IUserService
  ) {}
}

• Angular 13及以下版本不支持在类属性处直接调用inject()函数，优先选择方案1、2、4。
• 禁止直接将type-only导入的类/类型作为构造函数参数的类型标注，除非你已经用@Inject()显式指定了运行时可用的注入token。

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