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

问题描述 投票：0回答：7

类似于 Angular 14 生成的项目，我希望拥有单独的开发和生产环境，但是在使用 

ng new
创建项目时：

ng new my-app

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

angular-cli
7个回答
115
投票

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

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

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

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"
    },
19
投票

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

ng generate environments

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

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

5
投票

替代方案

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

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

5
投票

Angular 15 版本之后，默认情况下不会创建环境文件夹。您必须手动创建它们。 使用 Angular 提供的这一最佳功能来快速创建新环境。好处是它也会更新创建的environment.ts文件的角度json文件

ng generate environments

他们将拥有这个样板：

export const environment = {
  production: true
};

我从不建议手动创建它们，但仍然要手动创建环境，请按照以下步骤操作：

创建环境目录，然后创建自定义环境，如下所示

  • 环境.ts
  • 环境.prod.ts
  • 环境.staging.ts

然后你必须更新 angular.json 文件以在构建时替换环境。

   "production": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
          },
        ]
      },
      "dev": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.dev.ts"
          },
        ]
      },
4
投票

据我所知，在新的 Angular 版本中，使用 ng new 命令生成新项目时默认不会创建环境文件夹。但是，您可以按照以下步骤轻松地自行设置单独的开发和生产环境：

  1. 通过键入以下命令在 Angular 项目的根目录中手动创建 Environments 文件夹：

    mkdir src/environments

  2. 在环境文件夹中，创建两个 TypeScript 文件： 通过键入以下命令来获取environment.prod.ts和environment.ts：

    touch src/environments/environment.prod.ts
touch src/environments/environment.ts

  3. 打开environment.prod.ts 文件并定义特定于您的项目的生产环境变量。请考虑以下示例：

    export const environment = {
  production: true,
  apiUrl: 'https://portfolio.com/api',
  // Other production environment variables if you have
};

  4. 打开environment.ts文件，定义开发环境变量如下：

    export const environment = {
  production: false,
  apiUrl: 'http://localhost:4200/api',
  // Other production environment variables if you have
 };

  5. 现在，您可以在 Angular 代码中使用环境变量。例如，您可以在组件中导入环境文件并访问变量，如下所示：

    import { environment } from '../environments/environment';
// Usage example
if (!environment.production) {
  console.log('Development Mode');
};

  6. 通过上述步骤，您已经在 Angular 项目中设置了单独的开发和生产环境。现在您可以根据项目的需求修改相应文件中的环境变量。

  • 注意：请记住更新 apiUrl 或其他变量的值，以匹配您的实际 API 端点或任何其他特定于环境的配置。
2
投票

在 Angular 15 中不再需要 

environments
文件夹。

如果您的工作流程仍然需要该文件夹，您可以使用 

npm install -g @angular/[email protected]
降级，然后使用 
ng new
创建一个新项目。

0
投票

Angular v14 不再默认创建环境文件夹，如果需要，只需运行 

ng g environments

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.