当通过ng new创建一个angular项目时，Angular 15 CLI不会创建环境文件夹

类似于Angular 14生成的项目，我希望有独立的开发和生产环境，但在使用ng new创建项目时：

ng new my-app

这不会创建环境文件夹，也不会设置这个。

请参阅Angular - 配置特定环境的默认值。

EDIT:- 正如预测的那样，GitHub问题。

After the release of Angular CLI 15.1, a generation schematic will be available to add environment files for all existing build configurations within a project. Example usage:

ng g environments

要想手动创建。

如果你想重新创建环境，请按照以下步骤进行。

• 创建environments目录

• 创建你的自定义环境

  • environment.ts
  • environment.prod.ts
  • environment.staging.ts等。

• 更新你的angular.json或project.json来做fileReplacements，其中replace和with的路径是从项目根目录到环境文件。

  "configurations": {
       "production": {
          ...
          "fileReplacements": [
            {
              "replace": "apps/some-app/src/environments/environment.ts",
              "with": "apps/some-app/src/environments/environment.prod.ts"
            }
          ],
        },
        "development": {
          ...
        }
      },
      "defaultConfiguration": "production"
    },

在Angular 15中，environments文件夹不再需要了。

如果你的工作流程仍然需要那个文件夹，你可以用npm install -g @angular/cli@14.2.10降级，然后用ng new创建一个新的项目。

一个替代方案

因为看起来规范的环境设置目前是不存在的，或者可能会变得不规范，我想我应该分享一个替代模式，我在任何非Angular项目（包括后端/Node）中使用，现在在Angular v15.0.0上使用，效果非常好。

它利用标准的.env（和.env.{type}）文件，只需稍作设置，看起来像这样......

{app-name}
  |-environment
    |-env.ts
    |-path.ts
    |-index.ts
  |-.env
  |-.env.mock
  |-.env.dev
  |-.env.staging
  |-tsconfig.json
  |-package.json

package.json

{
  "scripts": {
    "SET TYPE=mock& start-command",  # "SET ..." for Windows setup.
    "SET TYPE=dev& start-command",
    "SET TYPE=qa& start-command"
  },
  "dependencies": {
    "dotenv": "n.n.n"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@env": [ "environment/index.ts" ]
        },
    },
}

environment/index.ts

export { env } from './env';

environment/path.ts

module.exports = {
    '': '.env',
    'undefined': '.env',
    'prod': '.env',
    'mock': '.env.mock',
    'dev': '.env.dev',
    'qa': '.env.staging',
}[ process.env.TYPE ];  // npm script "SET TYPE={type}& start-command"

environment/env.ts

require('dotenv').config({ path: require('./path') });

export const env = new (class Environment {
    TYPE: string = '';
    NODE_ENV: string = '';
    PORT: number = -1;
    
    constructor(env: Environment = <Environment>{}) {
        const { TYPE, NODE_ENV, PORT } = { ...this, ...env };
        
        this.TYPE = TYPE;
        this.NODE_ENV = NODE_ENV;
        this.PORT = PORT*1;
        
        return this;
    }
    
})({ ...process.env });

src/example.ts

import { env } from '@env';

const { TYPE, NODE_ENV, PORT } = env;
let http = HTTP;

if (TYPE === 'mock') http = mockHTTP;

export { http };

免责声明

"Angular是用Angular CLI构建的，它是一个节点应用程序，但在该构建过程中，你不能够直接从应用程序中访问process.env，因为它不是作为一个Node应用程序处理的。" -- 在Angular 5环境中使用process.env 。

如果能找到一个优雅的解决方法，那将是非常好的。