Question

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

有没有办法让ng build或任何其他工具允许在部署之前为我设置这个？

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 用于开发， prod 用于生产。

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

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

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

查看其文档中的build targets and environment files部分了解详情。

PS：Here's a similar question，您可能会发现答案也很有用。

Answer 2

是的，实际上非常方便。看一下src/environments/目录。你有至少2个文件，其中一个是environment.ts。 请勿更改此。相反，您应该将不同的env相关配置放在此目录中的其他文件中，例如environment.prod.ts。

src/environments/environment.ts中的评论很好地解释了所有内容：

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

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

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

可以在angular-cli.json中找到哪个env映射到哪个文件的列表。

所以你只需要使用普通的打字稿导入导入该文件中定义的const，例如

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

然后您可以在服务中进行设置：

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

现在你在其他地方注入使用这样的服务，就像任何其他服务一样;）

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

2 个答案: