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

Angular 2 - angular-cli: set global variable on build

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

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

是的,而且其实很方便。查看 src/environments/ 目录。您至少有 2 个文件,其中之一是 environment.ts不要更改这个。相反,您应该将与环境相关的不同配置放在该目录中的其他文件中,例如environment.prod.ts.

一切都在 src/environments/environment.ts:

中的评论中得到了很好的解释

The file contents for the current environment will overwrite these during build.

The build system defaults to the dev environment which uses environment.ts, but if you do

ng build --env=prod then environment.prod.ts will be used instead.

The list of which env maps to which file can be found in angular-cli.json.

因此您只需使用普通的打字稿导入来导入该文件中定义的常量,例如

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

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

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

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

使用 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 用于生产。

除了 devprod.

之外,您还可以添加自己的环境文件

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

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

查看其文档中的 build targets and environment files 部分了解更多详细信息。

PS:,您可能会发现那里的答案也很有用。