Angular5: Deploying Angular application to multiple clients

Question

I am developing an angular application which is a product and deployed to multiple clients. Clients will take this angular application and host it in their servers. So the Services' url will be different for the clients. I have seen solutions that talk about dev, prod. But that will not be applicable in this case. I am looking for a config file that is similar to .net config file. I have created a separate app.config.ts file but that gets built when I do ng build. I am looking for a solution where I can deploy the app to any client with out them to build it again.

import { InjectionToken } from "@angular/core";

export let APP_CONFIG = new InjectionToken("app.config");

export interface IAppConfig {
    apiEndpoint: string;
}

export const AppConfig: IAppConfig = {    
    apiEndpoint: "http://88.87.86.999/"
};

Will the angular app be hosted/served from the same server and port as the Services? Or will they be different? — Simply Ged
– Simply Ged, Commented Mar 29, 2018 at 14:54
They will be different. If it is same, then I could get the hosted url easily.. :) — indra257
– indra257, Commented Mar 29, 2018 at 15:19
The problem is the Angular app will run in the browser on the client so any config needs to be sent, or stored, on every client. I'm not sure how you would do this? Unfortunately the server address needs to be know at build time. The only thing I can think is deploy it as a Docker container and let the customer provide the server address as a parameter when starting the container? — Simply Ged
– Simply Ged, Commented Mar 29, 2018 at 15:38

David · Accepted Answer · 2020-02-10 10:31:48Z

14

What you can do it host the config file in json format in the assets folder and retrieve it dynamically. You need to make sure that you retrieve it before the app starts, that way it can be available in components/services when they need it. For that, you can use the APP_INITIALIZER Token

Step #1: put your json configuration files under src/assets/config/conf.json (json format, not ts format since there is no TS compiler in prod mode)

Step #2: Add a new config service

import {Inject, Injectable} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from 'rxjs/Rx';
import {environment} from "../../environments/environment";

/**
 * Declaration of config class
 */
export class AppConfig
{
//Your properties here
  readonly apiEndpoint: string;
}

/**
 * Global variable containing actual config to use. Initialised via ajax call
 */
export let APP_CONFIG: AppConfig;

/**
 * Service in charge of dynamically initialising configuration
 */
@Injectable()
export class AppConfigService
{

  constructor(private http: HttpClient)
  {
  }

  public load()
  {
    return new Promise((resolve, reject) => {

      this.http.get('/assets/config/config.json').catch((error: any): any => {
        reject(true);
        return Observable.throw('Server error');
      }).subscribe((envResponse :any) => {
        let t = new AppConfig();
        //Modify envResponse here if needed (e.g. to ajust parameters for https,...)
        APP_CONFIG = Object.assign(t, envResponse);
        resolve(true);
      });

    });
  }
}

Step #3: In your main module, add this before declaring the module

/**
* Exported function so that it works with AOT
* @param {AppConfigService} configService
* @returns {Function}
*/
export function loadConfigService(configService: AppConfigService): Function 

{
  return () => { return configService.load() }; 
}

Step #4: Modify the module providers to add this

providers: [
  …

  AppConfigService,
  { provide: APP_INITIALIZER, useFactory: loadConfigService , deps: [AppConfigService], multi: true },


],

Step 5: In your code, use the config

import {APP_CONFIG} from "../services/app-config.service";

//…
return APP_CONFIG.configXXX;

Now, you can ship the app to multiple clients; each client just need to have theyr specific parameter in conf.json file

edited Feb 10, 2020 at 10:31

answered Mar 29, 2018 at 15:07

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

indra257 Over a year ago

The only problem with this is, Client's users can easily access the conf.json file by just doing http:url/assets/config.json..

David Over a year ago

How is it a problem? Even if config is packaged completely into the build, it's still accessible as in the end it's just client JS code. Maybe retrieve an encrypted config in json file to make it slightly harder to see the values, but I'm not sure there is no point

MartaGalve Over a year ago

would this be better than saving the config properties in an environments file?

David Over a year ago

@bubble If it's saved in environments files, then you have to have one build per client. With this approach, you can have the same build that you deploy to each client, with just the config file that changes

Yinon Over a year ago

thanks @David for this detailed explanation. however we encountered issues with using the AppConfigService while bootstrapping our app since some of the root modules require passing the settings at bootstrap time and the service only runs after bootstrapping. e.g AuthModule.forRoot(appConfig)

|

Yinon · Accepted Answer · 2018-08-31 13:01:53Z

8

For the config to be loaded initially and use it even when bootstrapping the AppModule, we used this simple solution in main.ts.

notice we queued the

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));

inside an async function that waits for the fetching of a config file.

(async () => {

  // console.time()
  const response = await fetch('./assets/config/conf.json');
  const json = await response.json();
  Object.entries(json).forEach(([key, value]) => {
    environment[key] = value;
  });
  // console.timeEnd()

  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));

})();

the config file is located in the assets and is replaced accordingly by the deployment job.

meaning we have environment based config:

config.json
config.qa.json
config.prod.json

time of fetching on for us takes about 40 milliseconds (practically nothing. uncomment the console.time to check estimations in your own projects). I doubt it will consume too much time on any project as it is fetched from a local file. good luck!

edited Aug 31, 2018 at 13:01

answered Aug 31, 2018 at 8:03

Yinon

7478 silver badges13 bronze badges

2 Comments

Dennis Ameling Over a year ago

Small addition: if you need to pass those environment variables on to a provider in the AppModule, you can use useFactory. More details here

Anonymous Over a year ago

I also had variables i needed to inject even before bootstrapping. So thanks a lot for this solution. Furthermore, I like this approach as it still makes it possible to run ng build --prod etc..

Collectives™ on Stack Overflow

Angular5: Deploying Angular application to multiple clients

2 Answers 2

9 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related