Angular 2 构建一次，随处部署答案

【问题标题】：Angular 2 build once, deploy anywhereAngular 2 构建一次，随处部署
【发布时间】：2017-06-09 08:41:02
【问题描述】：

angular2 应用程序是否可以遵循“一次构建，随处部署”的原则？

我一直在寻找答案，告诉我为每个环境单独构建它，但这不是我想要的。

我们正在使用docker 和tomcat。

提前致谢。

【问题讨论】：

这绝对有可能，您能提供更多信息吗？你想根据环境改变什么？每个环境都有不同的配置吗？
主要是后端 API 的 URL。我们的验收环境、开发环境等有单独的 URL。所以是的，每个环境都有不同的配置。
你的 Angular 应用是否由 tomcat 提供服务？
@Krikke93 我们构建一些图像 + 使用 docker run 命令提供环境变量，这个 env 将是我们使用 docker 容器中的 bash 脚本的配置值，它将使用填充 env vars sed。喜欢这里的答案：stackoverflow.com/questions/38436129/…
@lorenzvth7，这适用于 Angular 2 吗？因为我注意到的第一件事是有问题的人使用的是 AngularJS 而不是 Angular 2。

标签： angular tomcat docker deployment

【解决方案1】：

我认为所有应用程序动态加载配置的共同点是使用名为 APP_INITIALIZER 的角度提供程序。

此提供程序允许在引导 Angular 应用程序之前执行一些代码。通常要执行的代码类似于get some config from an endpoint, eg /configuration。示例here

您可以自己编写代码，也可以使用这个库（在后台使用APP_INITIALIZER）：https://github.com/ngx-config/core，更准确地说是ConfigHttpLoader

在下面的示例中，我们使用 lib 通过 http 调用加载 /configuration。这在您的 app.module.ts

中

export function configFactory(http: Http): ConfigLoader {
  return new ConfigHttpLoader(http, '/configuration'); // FILE PATH || API ENDPOINT
}    

@NgModule({
imports: [
ConfigModule.forRoot({
          provide: ConfigLoader,
          useFactory: (configFactory),
          deps: [Http]
        })
]
})

然后，您提供 /configuration 的方式取决于您为应用提供服务的方式。我在一个项目中所做的是：

前端应用已打包所有配置（dev.json、integ.json、prod.json）
向 docker 传递环境变量（dev 或 integ 或 prod）
在 docker 镜像的 Dockerfile 中，根据环境创建指向正确配置文件的符号链接，然后启动服务器（在我的情况下是 nginx）：

CMD ln -nfs /path/to/config/${ENVIRONMENT}.json /path/to/configuration && nginx -g "daemon off;"

这样你的前端应用总是加载/configuration，但是根据环境，符号链接会指向不同的配置文件。

你可以使用这样的东西。

【讨论】：