Loading external configurations in Angular Universal

  return this.configService.config$.pipe(      first((n) => n.isServed),      map((n) => {        // if served with error, reroute or notify user, but do not block user        console.log(n.withError); // let's introduce this property        return true;      })    );

// after defining withError property in IConfig...private _createConfig(config: any, withError: boolean): void {    // cast all keys as are    const _config = { ...Config, ...(<IConfig>config) };    // is severd, always    _config.isServed = true;    // with error    _config.withError = withError;    // set static member    ConfigService._config = _config;    // next, always next the subject    this.config.next(config);  }  loadAppConfig(): Observable<boolean> {    return this.http.get(environment.configUrl).pipe(      map((response) => {        // create with no errors        this._createConfig(response, false);        return true;      }),      catchError((error) => {        // if in error, return set fall back from environment        // and create with errors        this._createConfig(Config, true);        return of(false);      })    );  }

"assets": [  {    "glob": "*.json",    "input": "configs",    "output": "/localdata"  }]

server.get('*', (req, res) => {  res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });});

// server.ts// export the ngExpressEngineexport const AppEngine = ngExpressEngine({  bootstrap: AppServerModule});

// ... angular.json"architect": {     // ...     "server": {        "builder": "@angular-devkit/build-angular:server",        "options": {            // choose the output path where the main.js will end up            "outputPath": "./host/server",             "main": "server.ts",            "tsConfig": "tsconfig.server.json"        },        "configurations": {            "production": {                // don't delete because there will be other files                "deleteOutputPath": false                // ...            }        }    }}

// host/server.jsconst express = require('express');// express appvar app = express();// setup expressrequire('./server/express')(app);// setup routesrequire('./server/routes')(app);// other stuff is up to you// listenvar port = process.env.PORT || 1212;app.listen(port, function (err) {  console.log('started to listen to port: ' + port);  if (err) {      console.log(err);      return;  }});

const express = require('express');// ngExpressEngine from compiled main.jsconst ssr = require('./main');// setup the routesmodule.exports = function (app) {  // set engine, we called it AppEngine in server.ts  app.engine('html', ssr.AppEngine);  // set view engine  app.set('view engine', 'html');  // set views directory  app.set('views', '../client');  // expose the configs path as localdata (or whatever you choose to name it)  app.use('/localdata', express.static('../localdata', { fallthrough: false }));  // expose client folder  app.use(express.static('../client'));  // now THIS  app.get('/*', (req, res) => {    // point to your index.html    res.render(`../client/index.html`, {      req, // pass request      res, // pass response      // here, we can provide things for ssr    });  });};

  loadAppConfig(): Observable<boolean> {    // fix url first if its on server    let url = environment.configUrl;    if (serverUrlExsits) {      url = serverUrl + url;    }    return this.http.get(url).pipe(     // ... etc    );  }

// change ConfigService// for this line to work, install @types/expressimport { Request } from 'express'; import { REQUEST } from '@nguniversal/express-engine/tokens';@Injectable()export class RequestService {  // make it Optional to work on browser platform as well  constructor(@Optional() @Inject(REQUEST) private request: Request) {}} loadAppConfig(): Observable<boolean> {    // fix url first if its on server    let url = environment.configUrl;    if (this.request) {      // on ssr get a full url of current server      url = `${this.request.protocol}://${this.request.get('host')}/${url}`;    } // ... etc  } }

{    "request": {        "headers": {             "host": "aumet.azurewebsites.net",            "disguised-host": "aumet.azurewebsites.net",            "x-original-url": "/webinfo",            "x-forwarded-for": "client-ip-address-here",            "x-forwarded-proto": "https"        },       // on other servers this could be localhost        "hostname": "aumet.azurewebsites.net",        "path": "/webinfo",        // don't read this value        "protocol": "http", }}

// in host/server/routes.js// change the final get  app.get('/*', (req, res) => {    // fix and provide actual url    let proto = req.protocol;    if (req.headers && req.headers['x-forwarded-proto']) {        // use this instead        proto = req.headers['x-forwarded-proto'].toString();    }    // also, always use req.get('host')    const url = `${proto}://${req.get('host')}`;    res.render(`../client/index.html`, {      req,      res,      // here, provide it      providers: [        {          provide: 'serverUrl',          useValue: url,        },      ],    });  });

// Angular inteceptor@Injectable()export class LocalInterceptor implements HttpInterceptor {  constructor(    // inject our serverURL    @Optional() @Inject('serverUrl') private serverUrl: string  ) {}  intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {    // if request does not have 'localdata' ignore    if (req.url.indexOf('localdata') < 0) {      return next.handle(req);    }    let url = req.url;    if (this.serverUrl) {      // use the serverUrl if it exists      url = `${this.serverUrl}/${req.url}`;    }    const adjustedReq = req.clone({ url: url });    return next.handle(adjustedReq);  }}

// app.module.tsproviders: [    {      provide: APP_INITIALIZER,      useFactory: configFactory,      multi: true,      deps: [ConfigService],    },    // provide http interceptor here    {      provide: HTTP_INTERCEPTORS,      useClass: LocalInterceptor,      multi: true,    },  ],

// host/server/routes.js// require the json file sitting in localdataconst localConfig = require('../localdata/config.prod.json');// setup the routesmodule.exports = function (app) {   // ...    res.render(`../client/index.html`, {      req,      res,      // also provide the localConfig      providers: [        {          provide: 'localConfig',          useValue: localConfig        }        // though don't lose the serverUrl, it's quite handy      ]     });  });};

  constructor(    private http: HttpClient,    // optional injector for localConfig    @Optional() @Inject('localConfig') private localConfig: IConfig  ) {}    loadAppConfig(): Observable<boolean> {    // if on server, grab config without HTTP call    if (this.localConfig) {      this._createConfig(this.localConfig, true);      return of(true);    }    return this.http.get(environment.configUrl).pipe(     // ...    );  }