Angular 15 CLI执行ng new未生成environments文件夹问题咨询

从Angular 15开始，CLI默认不再自动生成environments文件夹及配套配置，如果你需要和Angular 14一致的环境结构，可以通过以下两种方式实现：

方式一：新建项目时直接生成环境文件夹 #

执行创建命令时添加参数，强制启用传统环境配置结构：

ng new my-app --no-standalone

注：--no-standalone会生成基于NgModule的项目结构，同时自动创建environments文件夹及默认配置。

方式二：为现有项目手动添加环境配置 #

如果已经创建了项目，按以下步骤手动搭建：

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

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

2. 编写环境变量内容
   environment.ts：

export const environment = {
  production: false,
  // 可添加自定义配置，如API地址
  apiBaseUrl: 'https://dev.your-domain.com/api'
};

environment.prod.ts：

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

3. 修改angular.json关联环境配置
   找到projects -> [你的项目名称] -> architect -> build -> configurations节点，确保production和development配置包含文件替换规则：

"development": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.ts"
    }
  ],
  // 保留原有开发环境的其他配置
},
"production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  // 保留原有生产环境的优化、压缩等配置
}

4. 在代码中引用环境变量
   在组件、服务等文件中导入并使用环境配置：

import { environment } from '../environments/environment';

// 示例：使用API地址
const apiUrl = environment.apiBaseUrl;
console.log('当前环境是否为生产模式:', environment.production);

5. 验证构建命令

• 开发环境构建：ng build 或 ng build --configuration development
• 生产环境构建：ng build --configuration production

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