当通过ng new创建一个angular项目时，Angular 15 CLI不会创建环境文件夹
类似于Angular 14生成的项目，我希望有独立的开发和生产环境，但在使用ng new创建项目时：
ng new my-app
这不会创建环境文件夹，也不会设置这个。
npm和NodeJS？
- Jacopo Sciampi 2022-11-24
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.tsenvironment.prod.tsenvironment.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"
},
fileReplacements是否仍然有效。由于这个答案是在评论中提到的，所以我取消了删除，让别人来告诉我。
- Andrew Allen 2022-11-24
export default "hello dev"和export default "hello prod"放在环境中，import environment from "./environments/environment"; console.error(environment)放在main.ts中。ng build显示的是prod打印输出，ng build -c development显示的是development打印。
- Daniel T 2022-11-24
apps/some-app来自nx工作区。但可以是项目根部到环境文件的任何路径。
- Andrew Allen 2022-11-24
在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 。
如果能找到一个优雅的解决方法，那将是非常好的。