使用 Angular Universal 在 SSR 中处理环境变量

Question

我正在将 SSR 应用于已有的 Angular 项目。在之前的客户端呈现 CSR 实现中，我使用全局变量 window 来处理一个构建的 ENV VARS - 在此 article 之后的多个部署 CI/CD 目的。

我尝试使用自定义服务通过 APP_INITIALIZER 将 env vars 传递给 app.modules.ts 但没有成功，因为使用 forRoot() 的环境将被调用在我服务之前。此外，webpack 在这种情况下无能为力，因为需要一次构建 - 多次部署。

作为下面的示例，我尝试将 EnvironmentService 注入模块，但似乎尚未从文件中获取数据，如上文所述。

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

let envService: EnvironmentService;

@NgModule({
    declarations: [...],
    imports: [ServerLogModule.forRoot(envService.ENV_VARS)],
    providers: [...]
})
export class AppModule {}

Answer 1

• 无法将环境变量从 app.modules.ts 提供程序中的另一个服务传递到 forRoot() 方法，因为您将无法在调用该方法之前检索任何数据.

为了让它工作，最好使用 webpack 在构建时创建一个包含正确数据的 environment.ts 文件，并在 app.modules.ts [=16] 中使用它=]

• 您的问题中提到的文章 - 如您所说 - 对于客户端呈现情况非常有效，但对 SSR 使用相同的方法可能需要对 some/many 进行大量更改您可能已经做出了架构选择。

使用 Angular Universal 在 SSR 中处理环境变量

Handling environment variables in SSR with Angular Universal

server-side-rendering

angular-universal

angular