Angular 16环境变量读取异常求助：升级Angular11至18遇问题

问题现象 #

将Angular 11应用升级至Angular 18的过程中，升级到Angular 15前一切正常，但从15升级到16后出现环境变量读取异常：

• 使用import { environment } from '../environments/environment';导入后，environment被识别为Module类型，而非预期的环境变量对象
• 浏览器控制台中所有环境变量实际存储在environment.environment路径下，但无法通过environment = environment.environment赋值，也无法直接通过environment.production或environment.environment.production访问变量值

排查与解决步骤 #

1. 核对环境文件的导出格式 #

Angular 16+对ES模块导出的校验更严格，需确认environment.ts（及对应生产环境文件）的导出方式与导入语句匹配：

• 若使用import { environment } from '../environments/environment';，需保证文件为命名导出：

  // 正确的命名导出示例
  export const environment = {
    production: false,
    apiUrl: 'http://localhost:3000'
  };
  

• 若文件被误改为默认导出（如下方代码），需修改回命名导出，或调整导入语句为import environment from '../environments/environment';：

  // 错误的默认导出，需修正
  export default {
    production: false,
    apiUrl: 'http://localhost:3000'
  };
  

2. 检查Angular CLI环境文件配置 #

打开angular.json，确认configurations下的环境文件替换路径是否正确，避免编译时未加载对应环境的配置：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
    // 其他配置项
  }
}

3. 清理缓存并重新构建 #

升级后残留的缓存可能导致模块解析异常，执行以下命令清理并重建：

# 删除依赖包与锁文件
rm -rf node_modules package-lock.json
npm install
# 清理Angular构建缓存
ng cache clean
# 重新构建项目
ng build

4. 校验TypeScript配置 #

Angular 16对应TypeScript版本有更新，确认tsconfig.json中模块相关配置符合要求：

"compilerOptions": {
  "module": "ESNext",
  "moduleResolution": "bundler"
  // 其他配置项
}

若使用旧版moduleResolution（如node），可能引发模块解析逻辑冲突。

5. 排查第三方依赖与自定义配置 #

• 暂时移除自定义Webpack配置，重新构建测试是否恢复正常
• 将所有第三方依赖更新至支持Angular 16+的版本，避免依赖兼容性问题

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