Creating dynamic angular application for different users

Question

I'm working on an Angular front-end application that displays an UI with a consistent layout and interface but an unique company logo, colors and other variables. The goal is to create an Web application which can be used by multiple companies. Each company uses the application the same way and has the same UI but his unique company logo, colors,... displayed.

Due to scalability each company can't have his own application build so everything must be dynamically assigned upon login.

Currently each company has his unique login so my idea was to create different profiles in the front-end and then upon login a call is sent to the back-end to get the profile that has to be displayed. However I'm trying to find the best way to create such a system.

Currently I have a global constants file that is used by the entire application. These values need to be dynamic. (maybe multiple global constants files?)

export class GlobalConstants {
  public static displayName = 'Company A';
  public static logo = '../../../../assets/companya/logo.png';
  public static primaryColor = '#311b92';
  public static secundaryColor = '#200b92';
}

Answer 1

1. If there's one instance of the Angular application, say all of your clients use shared-front-end.com, then I suggest, you receive the logo path, color themes, etc as part of the user profile when they login.
2. If there are multiple instances of the Angular application, meaning you are going to deploy the same front-end to separate locations for each client and the back-end is the same for all instances, then I suggest moving on from compiled environment.ts file to runtime configuration file and:

• If the logo and color themes don't change often, then your runtime configuration file can contain the logo path and color theme for that instance.
• Otherwise, if the logo and color theme changes often, then put a unique clientId in your configuration file for each instance and each instance will have to make an initial http call to the back-end to get the logo path and color theme based on clientId.