使用 Angular Universal 处理 SSR 中的环境变量答案

【问题标题】：Handling environment variables in SSR with Angular Universal使用 Angular Universal 处理 SSR 中的环境变量
【发布时间】：2021-11-21 19:48:13
【问题描述】：

我正在将SSR 应用到预先存在的Angular 项目。在之前的客户端渲染CSR 实现中，我使用全局变量window 来处理ENV VARS 进行一次构建 - 多个部署CI/CD 目的遵循此article。

我尝试使用自定义服务通过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 {}

【问题讨论】：

问题不是很清楚，打电话ServerLogModule.forRoot()是必须的吗？我的意思是可以更改服务中的代码，还是从第三方库导入服务？可以加你的代码ServerLogModule吗？
我曾经使用forRoot 拥有我们自己的模块，我在那里解决了它们。现在的问题在于许多第三方模块，例如上面示例中的ServerLogModule

标签： angular server-side-rendering angular-universal

【解决方案1】：

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

为了让它工作，最好使用webpack在构建时创建一个具有正确数据的environment.ts文件，并在app.modules.tsthis may help中使用它

• 如您所说，您的问题中提到的文章非常适用于客户端渲染情况，但对SSR 使用相同的方法可能需要对您可能已经拥有的一些/许多架构选择进行大量更改制作。

【讨论】：