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

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找到。

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

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

然后就可以在服务中设置了：

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

现在您在其他地方注入使用此类服务​​，就像任何其他服务一样;)