<p>I was assigned the task of making a dynamic load of settings for the Angular application from the JSON file on the server during the application start. The peculiarity is that the application uses server rendering with Universal.
I tried to do this for the browser using this method.
<a href="https://juristr.com/blog/2018/01/ng-app-runtime-config" rel="nofollow noreferrer">https://juristr.com/blog/2018/01/ng-app-runtime-config</a>
But it works only for the browser app rendering.
How to do it for server-side rendering?</p>

<p>The most likely culprit here is that you're loading json file from relative path but 
Universal does not currently support relative urls but only absolute.</p>

<p>So you can provide absolute path to your json file:</p>

<p><strong>server.ts</strong></p>

<pre><code>app.engine('html', (_, options, callback) =&gt; {
  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: () =&gt; `${protocol}://${host}`, deps: [] },
    ]
  });
  engine(_, options, callback);
});
</code></pre>

<p><strong>your.service.ts</strong></p>

<pre><code>@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&lt;Config&gt;(
      `${this.baseUrl}/assets/plugins-config.json`
    );
  }
}
</code></pre>

<p>For more details see <a href="https://github.com/alexzuza/angular-plugin-architecture/blob/23ab862d96f2fe65942a8cd78ac605ff0f699f56/src/app/services/plugins-config.provider.ts#L32" rel="noreferrer">example of project</a> that also uses APP_INITIALIZER to load config </p>
