Angular14中@Injectable服务注入ngx-cookie-service报NG0203如何解决

你碰到的NG0203错误由两个问题共同或单独导致：

1. 安装的ngx-cookie-service版本与Angular 14不匹配
2. inject()调用位置非法：Angular规定inject()只能在构造函数参数定义、类字段初始化、工厂函数这几个注入上下文阶段调用，你在构造函数的函数体内部调用inject()时，注入上下文已经销毁，因此触发报错。

1. 安装版本匹配的依赖 #

先卸载当前不匹配的版本，安装适配Angular 14的14.x大版本包：

npm uninstall ngx-cookie-service
npm install ngx-cookie-service@14.x

2. 调整CookieService注入方式，二选一即可 #

方式一：标准构造函数注入（推荐，和你现有服务的注入风格统一） #

直接把CookieService加入构造函数的依赖参数列表，不需要手动调用inject()，也不需要提前声明可选类型的cookieService字段，修正后的完整服务代码如下：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ReplaySubject } from 'rxjs';
import { CookieService } from 'ngx-cookie-service';
// 保留你原有其他依赖的import：BackendService、各个Store、UserTypes枚举等

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  readonly url: string = 'http://localhost:4200/api/';
  statusSubject: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
  userType: UserTypes = UserTypes.User;

  constructor(
    private httpClient: HttpClient,
    private backendService: BackendService,
    private addressStore: AddressStore,
    private orderStore: OrderStore,
    private shoppingCartStore: ShoppingCartStore,
    private userStore: UserStore,
    private wishlistStore: WishlistStore,
    // 在此处注入CookieService
    private cookieService: CookieService
  ) {
    // 直接使用即可，原有判断逻辑不变
    if (this.cookieService.get("sessionKey") != null) {
      this.statusSubject.next(true);
    } else {
      this.statusSubject.next(false);
    }
  }

  login(){/* 原有登录逻辑保持不变 */}
  logout(){/* 原有登出逻辑保持不变 */}
}

方式二：使用inject()函数的正确写法 #

如果要使用inject() API，必须把调用放在类字段初始化的位置，不能放在构造函数体内部：

import { Injectable, inject } from '@angular/core';
// 其他import保持不变，记得引入inject

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  readonly url: string = 'http://localhost:4200/api/';
  statusSubject: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
  userType: UserTypes = UserTypes.User;
  // 字段初始化阶段调用inject是合法上下文
  private cookieService = inject(CookieService);

  constructor(
    private httpClient: HttpClient,
    private backendService: BackendService,
    private addressStore: AddressStore,
    private orderStore: OrderStore,
    private shoppingCartStore: ShoppingCartStore,
    private userStore: UserStore,
    private wishlistStore: WishlistStore
    // 不需要在构造函数参数里再加CookieService
  ) {
    // 原有判断逻辑不变，直接用this.cookieService即可
    if (this.cookieService.get("sessionKey") != null) {
      this.statusSubject.next(true);
    } else {
      this.statusSubject.next(false);
    }
  }

  login(){/* 原有逻辑不变 */}
  logout(){/* 原有逻辑不变 */}
}

不需要在AppModule的providers数组中额外注册CookieService，14.x版本的ngx-cookie-service默认配置为根注入器提供，重复注册反而可能引发额外的注入异常。

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