Angular 16报错：Property 'apiEndpoint'不存在于类型'{}'

报错信息 #

src/app/AppConfig/appconfig.service.ts: Property 'apiEndpoint' does not exist on type '{}'

所有代码逻辑看似正常，apiEndpoint 能正常触发自动补全，但报错却提示该属性不存在于空对象类型上，而非我们定义的 AppConfig 类型。已尝试执行 ng serve -o 重启应用、重启VS Code的TypeScript服务器，报错仍未消失。

相关代码 #

appconfig.service.ts #

import { InjectionToken } from "@angular/core";
import { AppConfig } from "./appconfig.interface";
import { environment } from '../../environments/environment';

export const APP_SERVICE_CONFIG = new InjectionToken<AppConfig>('app.config');

export const APP_CONFIG: AppConfig = {
  apiEndpoint: environment.apiEndpoint  // <<<< 此处能正常触发自动补全
}

appconfig.interface.ts #

export interface AppConfig {
  apiEndpoint: string;
}

environment.ts #

export const environment = {
  production: false,
  apiEndpoint: "http://localhost:8080/api/v1/",
};

tsconfig.json #

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

解决方法 #

这个问题多是TypeScript类型推断异常或Angular依赖注入校验的小问题，可尝试以下方案：

• 显式断言环境变量类型：手动指定environment的属性类型，强制TypeScript识别：

  export const APP_CONFIG: AppConfig = {
    apiEndpoint: (environment as { apiEndpoint: string }).apiEndpoint
  }
  

• 给环境变量定义接口：在environment.ts中显式声明环境变量的接口，避免隐式推断问题：

  export interface Environment {
    production: boolean;
    apiEndpoint: string;
  }
  
  export const environment: Environment = {
    production: false,
    apiEndpoint: "http://localhost:8080/api/v1/",
  };
  

• 彻底清理缓存重建：执行命令清空Angular和npm缓存后重新构建：

  ng clean
  rm -rf node_modules .angular/cache package-lock.json
  npm install
  ng serve -o
  

• 对齐TS版本：检查VS Code右下角的TypeScript版本，确保与项目依赖的TS版本一致（可点击版本号切换为项目版本）。

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