在 AoT 编译的 Angular 应用中访问 window 属性

Accessing window properties in an AoT-compiled Angular app

为了防止针对不同环境多次构建我们的 Angular-App，我们尝试放弃使用常规 fileReplacements 将特定于环境的变量（例如服务端点）注入我们的应用程序，而是加载这些变量来自资产的环境（/assets/environment.js 在我们的例子中）。

this or this.

等帖子中概述了该方法

environment.js很简单。它包含在我们 index.html 的 <script> 标记中，以确保它在任何 angular 代码之前加载和执行，并且它只是设置 window 的 属性 （是的全局变量！）

window.env = {
  serviceUrl: 'https://production.example.com/api'
}

这对一个关键异常非常有效。我们的应用程序中有一些模块在设置时需要访问这些环境变量：

@NgModule({
  imports: [
    ExampleModule.forExample({
      serviceUrl: window.env.serviceUrl,
    }),
  ],
  ...
})
export class AppModule { }

这将失败，因为 window.env 在 AoT 编译时不存在/undefined。

有什么办法可以解决这个问题吗？

我们的大多数应用程序都很繁重，因此我们不想切换到 JiT 编译，我们还希望将构建保持在最低限度，因为某些项目可能需要长达 20 分钟。

基本放弃后我们找到了NGSSC(https://github.com/kyubisation/angular-server-side-configuration).

NGSSC 能够在 AoT-Build 期间标记变量。将应用程序部署到特定环境时，可以通过调用 ngssc insert.

将这些标记替换为实际变量值