Angular升级至v13最新小版本后出现ɵfac属性及NGXS异常

Angular 13小版本升级后，编译器对抽象组件的元数据处理逻辑收紧：带@Component装饰器的抽象类会被编译器尝试生成工厂方法（ɵfac），但抽象类无法实例化，因此抛出“只能get不能set”的类型错误。移除@Component后，BaseComponent不再被Angular识别为组件类，导致NGXS依赖注入上下文失效，触发“未导入NGXS模块”的误报。

方案1：将BaseComponent改为抽象服务类 #

把BaseComponent从组件类转为可继承的抽象服务类，用@Injectable()替代@Component，既保留继承能力，又能正常使用依赖注入：

import { Injectable, Injector } from '@angular/core';
import { Store } from '@ngxs/store';

@Injectable()
export abstract class BaseService {
  protected store: Store;

  constructor(injector: Injector) {
    this.store = injector.get(Store);
  }
}

业务组件继承该服务类，自身保留@Component装饰器：

import { Component, Injector } from '@angular/core';
import { BaseService } from './base.service';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html'
})
export class TableComponent extends BaseService {
  constructor(injector: Injector) {
    super(injector);
  }
}

方案2：调整BaseComponent的@Component配置 #

给BaseComponent的@Component添加空模板与选择器，明确标记为抽象类，避免编译器生成无效工厂实例：

import { Component, Injector } from '@angular/core';
import { Store } from '@ngxs/store';

@Component({
  selector: '',
  template: ''
})
export abstract class BaseComponent {
  protected store: Store;

  constructor(injector: Injector) {
    this.store = injector.get(Store);
  }
}

同时在tsconfig.json中添加编译器选项，适配抽象组件的处理逻辑：

{
  "compilerOptions": {
    // 其他原有配置
    "angularCompilerOptions": {
      "strictInjectionParameters": false
    }
  }
}

方案3：升级NGXS适配Angular 13.3+ #

当前使用的NGXS 3.7.3版本与Angular 13.3的依赖注入逻辑存在兼容性问题，升级到适配Angular 13的最新NGXS版本（如3.8.x系列）：

npm install @ngxs/store@^3.8.0 --save

升级后移除BaseComponent的@Component装饰器，此时NGXS可正常识别注入上下文，无需额外配置。

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