如何在 Angular 15 中使用运行时配置，以便我还可以在 AppModule 导入中提供值？

Question

我花了两天时间寻找一种方法来读取资产文件夹中的 config.json 文件。

我尝试在 main.ts 中引导时读取此文件，这样我就可以在像这样的块中使用 AppModule 中的值：

进口：[ ...

AuthModule.forRoot({
  config: {
    authority: 'https://xxxxxxx',
    clientId: 'xxxxxxxxx',
    logLevel: LogLevel.Debug,
    postLogoutRedirectUri: window.location.origin,
    redirectUrl: window.location.origin,
    responseType: 'code',
    scope: 'openid profile email offline_access',
    secureRoutes: ['THIS_IS_WHERE_I_WANT_TO_ADD_THE VALUE_IN_MY_CONFIG_FILE'],
    silentRenew: true,
    useRefreshToken: true
  }
}),

...

我能够在 main.ts 中读取它并向应用程序提供该值。 我只是找不到在应用程序模块的导入数组中使用它的方法。

我尝试了环境，但我陷入了 NX project.json 不再支持 fileReplacement 的困境，并且许多网站建议环境不应该是正确的选择，因为您不想为每个环境进行单独的构建（而唯一的区别只是几个设置）

因此尝试运行时配置，这听起来很理想。 我尝试了许多关于使用 APP_INITIALIZER 或使用纯 JavaScript 在 main.ts 中获取 json 的建议文章，因为此时尚未加载框架。

所有这些运行时选项实际上都有效，因为可以在整个应用程序中单独访问配置数据。 只是不是在 AppModule 中我的特定位置，其中某些模块需要急切地传递 Root 的一些配置数据。

Answer 1

我不会直接回答你关于如何加载配置文件的问题。

我们处理多个环境的方式是将所有配置包含在单个构建中，然后根据应用程序运行的域来决定使用哪个配置。我们不使用 SSR，所以它非常简单，节省了我们很多时间，因为我们不需要为每个环境进行重建，也不需要将不同的配置文件部署到不同的环境，然后等待conf加载。

function determineEnvironment() {
  const domain = window.location.hostname;
  switch (domain) {
    case 'www.example.com':
    case 'prod.localhost':
      return prodEnvironment;
    case 'test.example.com':
    case 'test.localhost':
      return testingEnvironment;
    case 'demo.example.com':
    case 'demo.localhost':
      return demoEnvironment;

Answer 2

这个库允许您在运行时读取 src/config.json。

https://github.com/vdolek/angular-runtime-

如何配置取决于您。我在容器启动中使用 bash 脚本来读取环境变量并将其写入该文件。

引自其自述文件：

Angular 支持针对不同环境的一个部署包 具有特定配置。

Angular 框架缺乏对运行时配置管理的支持。 内置环境结构是随部署一起编译的 包，因此您必须为每个环境构建应用程序。 它不允许您构建一个可以部署到的包 不同的环境。

该库支持在运行时加载配置。它 还允许您加载多个配置文件并合并它们 到一个配置对象中。