Angular 13初始化错误：无法在初始化前访问''问题排查

问题场景 #

开发Angular项目时，IntelliJ编译器无任何异常提示，但网页运行时出现报错：Uncaught ReferenceError: Cannot access '' before initialization。具体表现为：

• 在UserComponent组件内实例化QueryUser对象完全正常
• 在ToastService服务内实例化QueryUser时，网页加载直接抛出上述错误

环境信息 #

• Angular: 13.1.3
• Node: 16.17.1

问题原因 #

核心问题在于错误地使用implements实现一个类而非extends继承类：

1. BaseRequest本身是包含属性初始化逻辑的类，而非TypeScript接口
2. 当QueryUser用implements BaseRequest时，相当于把BaseRequest当作接口实现，需要手动重写所有属性和构造函数逻辑
3. 服务是providedIn: 'root'级别，初始化时机早于组件，此时QueryUser构造函数中引用的外部依赖（如getAccessToken、OperationType）存在初始化顺序问题，导致运行时引用未初始化的变量
4. 改为继承BaseRequest后，复用了父类的构造函数逻辑，Angular的依赖初始化顺序机制能正确处理变量引用，避免了未初始化的问题

解决方案 #

将QueryUser从实现BaseRequest改为继承BaseRequest，通过super()调用父类构造函数，复用父类的属性初始化逻辑。

不工作的代码（原实现） #

// QueryUser.ts
export class QueryUser implements BaseRequest {
  accessToken: string;
  httpMethod: number;
  timeStamp: number;

  constructor() {
    this.accessToken = getAccessToken();
    this.httpMethod = OperationType.GET;
    this.timeStamp = Math.round(convertMilliSecondToSecond(new Date().valueOf()));
  }

  url(): string {
    return UrlUtil.transObjectToParameter(UnAuthenticatedApi.GET_USER, this);
  }
}

修复后的工作代码 #

// QueryUser.ts
export class QueryUser extends BaseRequest {
  constructor() {
    super(OperationType.GET);
  }

  override url(): string {
    return UrlUtil.transObjectToParameter(AuthenticatedApi.GET_USER, this);
  }
}

关联的BaseRequest类代码 #

// BaseRequest.ts
export class BaseRequest {
  accessToken: string;
  httpMethod: number;
  timeStamp: number;

  constructor(httpMethod: number) {
    this.accessToken = getAccessToken();
    this.httpMethod = httpMethod;
    this.timeStamp = Math.round(convertMilliSecondToSecond(new Date().valueOf()));
  }

  url(): string {
    return "";
  }
}

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