Angular 2 - angular-cli:在构建时设置全局变量

Question

这是我第一次尝试部署Angular2应用程序.我想设置API端点的URL,我希望它在每个环境中都有所不同.

有没有办法制作ng版本或任何其他工具,允许在部署之前为我设置？

Answer 1

使用Angular CLI工具,您可以配置不同的环境.

ng build可以指定构建目标(--target=production或--target=development)以及要与该构建(或)一起使用的环境文件.默认情况下,使用开发构建目标和环境.--environment=dev--environment=prod

用于确定使用哪个环境文件的映射可以在angular-cli.json中找到:

"apps": {
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
}

这些选项也适用于serve命令.如果不通过对环境的值,则默认为dev的发展,并督促生产.

您还可以添加除dev和prod之外的自己的env文件.

然后,在您的代码中,您可以进行简单的检查,就像main.ts文件中的默认检查一样:

if (environment.production) {
  enableProdMode();
}

有关更多详细信息,请查看其文档中的构建目标和环境文件部分.

PS:这是一个类似的问题,你可能会发现答案也很有用.

Answer 2

是的,它实际上非常方便.看看src/environments/目录.你有至少2个文件,其中一个是environment.ts.不要改变这个.相反,你应该将不同的env相关配置放在这个目录中的其他文件中,例如environment.prod.ts.

在评论中,所有内容都得到了很好的解释src/environments/environment.ts:

当前环境的文件内容将在构建期间覆盖这些内容.

构建系统默认使用的开发环境environment.ts,但如果你这样做

ng build --env=prod然后environment.prod.ts将使用.

env映射到哪个文件的列表angular-cli.json.

所以你只需要使用普通的typescript导入导入该文件中定义的const,例如

import { environment } from '../../environments/environment';

然后你可以在服务中进行设置:

@Injectable()
export class SettingsService {
    public environment = environment;
}

现在你注入使用这样的服务在其他地方,像任何其他服务;)