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

Question

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

ng new my-app

这不会创建环境文件夹或对其进行设置。

Answer 1

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

编辑：- 正如预测的那样，GitHub 问题

Angular CLI 15.1 发布后，将可以使用生成原理图为项目中所有现有的构建配置添加环境文件。用法示例：

ng g environments

手动创建：

如果您想重新创建环境，请按照下列步骤操作：

• 创建environments目录

• 创建您的自定义环境

  • environment.ts
  • environment.prod.ts
  • environment.staging.tsETC。

• 更新您的angular.jsonor project.jsonto dofileReplacements路径从项目根目录到replaceand的环境文件with：

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

Answer 2

我还没有全部测试过，但似乎有一个新命令：

ng generate environments

这是一个 Youtube 视频，描述了需要完成的步骤。之后似乎还有很多配置步骤。但我打算尝试一下。

https://www.youtube.com/watch?v=3IXwN4XJywQ

Answer 3

替代

因为看起来规范的环境设置目前不存在并且|或者可能变得非标准，所以我想我应该分享一个用于任何非 Angular 项目（包括后端/节点）的替代模式，现在在 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，因为它不作为节点应用程序进行处理。 ” --使用 process。 Angular 5 环境中的 env

如果能找到一个优雅的解决方法来解决这个问题，那就太好了。