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

Question

为了防止针对不同的环境多次构建Angular-App，我们尝试放弃使用常规fileReplacements将特定于环境的变量（例如，服务端点）注入到我们的应用中，而是从资产（{{ 1}}）。

this或this之类的帖子中概述了这种方法。

environment.js非常简单。它包含在我们index.html的/assets/environment.js标记中，以确保在任何角度代码之前都已加载并执行它，并且它只是设置window的属性（是全局变量！）

<script>

除了一个严重的例外，这非常有效。我们的应用程序中的某些模块在设置时需要访问这些环境变量：

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

这将失败，因为AoT编译中不存在window.env / @NgModule({ imports: [ ExampleModule.forExample({ serviceUrl: window.env.serviceUrl, }), ], ... }) export class AppModule { } 。

有什么办法可以解决此问题？

我们的大多数应用程序都很沉重，因此我们不想切换到JiT编译，我们还希望将构建保持在最低水平，因为对于某些项目而言，它们可能需要20分钟的时间。

Answer 1

在基本放弃之后，我们发现了NGSSC（https://github.com/kyubisation/angular-server-side-configuration）。

NGSSC能够在AoT构建期间标记变量。将应用程序部署到特定环境时，可以通过调用ngssc insert将这些令牌替换为实际的变量值。