Angular ng serve报config未定义及启动配置问题

问题清单 #

• 带参数执行ng serve ui-app-1可拉起应用，但浏览器控制台抛出Uncaught ReferenceError: config is not defined运行时错误
• 无参数执行ng serve无法启动默认项目，不符合Angular标准启动流程
• 修复后需支持VS Code断点调试，满足后续登录页开发、会话Cookie注入、路由跳转等功能的开发要求

分步修复 #

1. 解决无参数ng serve启动失败问题 #

问题根源为angular.json默认项目配置缺失或错误：

• 打开项目根目录下的angular.json文件，找到根层级的defaultProject字段，将值设置为目标启动项目ui-app-1，参考配置：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "defaultProject": "ui-app-1",
  "projects": {
    // 项目列表配置保持原有内容即可
  }
}

• 校验projects.ui-app-1.architect.serve节点配置完整性，确保必填项无缺失，标准配置参考：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "ui-app-1:build",
    "port": 4200
  },
  "configurations": {
    "production": {
      "browserTarget": "ui-app-1:build:production"
    }
  }
}

配置完成后先执行一次ng serve，验证无需追加项目名参数即可正常启动服务。

2. 解决config is not defined运行时错误 #

该错误为全局变量未声明、未加载或未正确注入导致，按优先级排查：

• 检查入口文件src/main.ts：确认代码中使用的config变量是否已正确导入。如果是自定义全局运行时配置变量，先在src/typings.d.ts文件中补充类型声明：

declare const config: Record<string, unknown>;

• 检查配置加载顺序：如果config是存放在独立js文件（如assets/config.js）中的运行时配置，先确认该文件路径已加入angular.json中projects.ui-app-1.architect.build.options.assets数组，确保构建时会被复制到输出目录；再检查src/index.html中该配置脚本的引入位置，必须放在<app-root>标签之后、main.js脚本引入之前，避免主脚本执行时配置还未加载。
• 检查环境变量配置：如果config原本应为Angular环境配置，确认代码中是否正确从src/environments/environment导入配置对象，禁止直接使用未导入的裸变量。
• 校验依赖一致性：在项目根目录执行npm install，确保@angular/core、@angular/cli、@angular-devkit/build-angular三个核心包版本完全匹配，避免版本不兼容导致构建时变量注入失败。

3. 配置VS Code断点调试能力 #

启动问题修复后，在项目根目录创建.vscode/launch.json文件，写入以下配置即可支持断点调试：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Angular调试",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

使用时先执行ng serve拉起服务，再在VS Code调试面板选择该配置启动浏览器，即可在组件、服务代码中正常命中断点。 #

修复校验标准 #

全部配置完成后，满足以下条件即为修复成功：

• 无参数执行ng serve无报错，服务正常监听4200端口
• 浏览器访问应用地址无控制台错误，config变量可正常读取
• VS Code中可正常命中代码断点
• 后续开发登录功能时，在HttpClient请求中添加withCredentials: true配置即可自动携带会话Cookie

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