如何使通用 SSR 的 Angular 应用程序使用来自 json 文件的动态配置？

Question

我的任务是在应用程序启动期间从服务器上的 JSON 文件为 Angular 应用程序动态加载设置。特殊之处在于应用程序使用 Universal 的服务器渲染。我尝试使用此方法为浏览器执行此操作。 https://juristr.com/blog/2018/01/ng-app-runtime-config 但它仅适用于浏览器应用程序渲染。服务端渲染怎么做？

Answer 1

这里最有可能的罪魁祸首是您从相对路径加载 json 文件，但 Universal 目前不支持相对 url，而只支持绝对。

因此，您可以提供 json 文件的绝对路径：

服务器.ts

app.engine('html', (_, options, callback) => {
  const protocol = options.req.protocol;
  const host = options.req.get('host');

  const engine = ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP),
      { provide: 'APP_BASE_URL', useFactory: () => `${protocol}://${host}`, deps: [] },
    ]
  });
  engine(_, options, callback);
});

your.service.ts

@Injectable()
export class ConfigProvider {
  config: Config;

  constructor(
    private http: HttpClient,
    @Inject(PLATFORM_ID) private platformId: {},
    @Inject('APP_BASE_URL') @Optional() private readonly baseUrl: string
  ) {
    if (isPlatformBrowser(platformId)) {
      this.baseUrl = document.location.origin;
    }
  }

  loadConfig() {
    return this.http.get<Config>(
      `${this.baseUrl}/assets/plugins-config.json`
    );
  }
}

有关更多详细信息，请参阅还使用 APP_INITIALIZER 加载配置的项目示例