Angular 18创建项目无environments文件夹，是否需手动添加该功能？

原因 #

从Angular 17版本开始，官方默认的新项目模板不再自动生成environments文件夹及相关配置。这是因为Angular团队推出了更简洁灵活的**应用配置（Application Config）**方案，替代了传统的环境文件夹模式，以简化项目配置流程。

解决方案 #

方案1：手动恢复传统environments文件夹 #

如果你习惯使用旧的环境配置方式，可以手动添加：

1. 在src目录下新建environments文件夹，创建两个文件：
   • environment.ts（开发环境）：

     export const environment = {
       production: false,
       apiUrl: 'https://dev-api.example.com'
     };
     

   • environment.prod.ts（生产环境）：

     export const environment = {
       production: true,
       apiUrl: 'https://api.example.com'
     };
     

2. 修改angular.json，在projects -> [你的项目名] -> architect -> build -> configurations -> production节点下添加文件替换规则：

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

3. 在代码中导入使用：

   import { environment } from './environments/environment';
   
   if (environment.production) {
     // 生产环境逻辑
   }
   

方案2：使用Angular 17+推荐的应用配置方案 #

官方推荐通过ApplicationConfig结合环境变量来管理配置，步骤如下：

1. 在main.ts中直接定义环境相关配置：

   import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
   import { provideRouter } from '@angular/router';
   import { routes } from './app/app.routes';
   
   // 利用import.meta.env获取环境标识
   const isProduction = import.meta.env.PROD;
   const apiUrl = isProduction ? 'https://api.example.com' : 'https://dev-api.example.com';
   
   export const appConfig: ApplicationConfig = {
     providers: [
       provideZoneChangeDetection({ eventCoalescing: true }),
       provideRouter(routes),
       // 将配置作为依赖注入项提供
       { provide: 'API_URL', useValue: apiUrl }
     ]
   };
   

2. 在组件或服务中注入使用配置：

   import { Inject, Injectable } from '@angular/core';
   
   @Injectable({ providedIn: 'root' })
   export class ApiService {
     constructor(@Inject('API_URL') private apiUrl: string) {
       console.log('当前API地址:', this.apiUrl);
     }
   }
   

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