Angular脚手架未生成Environments文件夹问题求助

原因说明 #

从Angular 14版本开始，用ng new命令默认创建的是独立组件项目，这类项目不会自动生成environments文件夹。如果你的教程基于Angular 13及以下版本，默认生成的传统项目结构就包含这个文件夹，这就是你遇到的版本差异问题。

解决方法 #

方法1：手动创建并配置环境文件

• 在项目根目录的src文件夹下新建environments文件夹
• 在该文件夹内创建两个文件：
  • environment.ts（开发环境配置）：

    export const environment = {
      production: false,
      // 可添加自定义配置，比如API地址
      apiUrl: 'http://localhost:3000'
    };
    

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

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

• 打开angular.json文件，找到projects下对应项目的build配置，在configurations.production里添加（或确认）文件替换规则：

  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      // 保留其他已有的生产配置项
    }
  }
  

方法2：重新创建传统结构的项目

如果想直接生成带environments文件夹的项目，创建时加上--no-standalone参数：

ng new your-project-name --no-standalone

要是还有问题，可以把你项目的文件夹截图发出来，方便进一步排查。

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