使用Angular CLI 15.0.0创建项目后缺失environment文件及文件夹咨询

原因 #

Angular CLI 15及以上版本在创建新项目时，默认不再自动生成src/environments目录以及environment.ts、environment.prod.ts文件。这是官方的设计变更：为了简化项目配置流程，Angular推荐使用基于app.config.ts的应用配置系统，结合构建阶段的变量替换来管理不同环境的配置差异，替代了传统的环境文件方案。

解决办法 #

如果你仍需要使用传统的环境文件方案，可以手动添加并配置：

1. 创建环境文件目录与文件
   在项目根目录的src文件夹下新建environments目录，然后在其中创建两个文件：

   • environment.ts（开发环境配置）
   • environment.prod.ts（生产环境配置）

   示例配置内容：
   environment.ts：

   export const environment = {
     production: false,
     apiBaseUrl: 'http://localhost:3000/api'
   };
   

   environment.prod.ts：

   export const environment = {
     production: true,
     apiBaseUrl: 'https://your-production-domain.com/api'
   };
   

2. 配置angular.json识别环境替换规则
   打开项目根目录的angular.json文件，找到projects -> [你的项目名称] -> architect -> build -> configurations节点：

   • 在production配置中添加fileReplacements：

     "fileReplacements": [
       {
         "replace": "src/environments/environment.ts",
         "with": "src/environments/environment.prod.ts"
       }
     ]
     

   • 确保development配置中也有对应的替换规则（指向environment.ts），默认情况下CLI可能已自动生成，若没有则手动添加相同结构的配置。

3. 在代码中引用环境配置
   在需要使用环境变量的组件或服务中导入：

   import { environment } from '../environments/environment';
   
   // 使用示例
   console.log('当前API地址:', environment.apiBaseUrl);
   

官方推荐的替代方案 #

如果你想遵循Angular 15+的最佳实践，可以使用app.config.ts结合构建变量：

1. 在app.config.ts中定义配置，并通过inject获取环境变量；
2. 在angular.json的build -> options -> define中设置全局构建变量，比如：

   "define": {
     "process.env.API_BASE_URL": "'http://localhost:3000/api'"
   }
   

   生产环境配置中替换为生产地址即可。

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