How to make an Angular app witch Universal SSR use dynamic configurations from json file?

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.

So you can provide absolute path to your json file:

server.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`    );  }}

For more details see example of project that also uses APP_INITIALIZER to load config

You could use the following package

https://www.npmjs.com/package/runtime-config-loader

This is what I use and works just fine...

constructor(@Inject(DOCUMENT) private document: Document,           @Inject(PLATFORM_ID) private platformId: Object,           @Optional() @Inject(REQUEST) private request: any) {    if (isPlatformServer(platformId)) {       const port = request.socket.localPort;       this.baseUrl = this.request.protocol + '://' + this.request.hostname + ':' + port;    } else {       this.baseUrl = this.document.location.origin;    }    ....}