Access multiple clients using same angular 5 deployment

Question

I'm planning to use one of my angular 5 application instances for two different clients (Let's say the code names of clients are X and Y).

I want to use the same angular deployment for both of them. My Back End is written in Java and it is written in such a way that all data (update and retrieval) taken from the BE based on the client id.

Let's say when users want to access services from client X, users can type http://url.com/X/rest_of_the_url and use the application with client X credentials. when users want to use client Y services, they can access using http://url.com/Y/rest_of_the_url

How can i do this in angular 5 ?

To achieve this you will have to modify back end to support Multi-tenancy. It's an architecture in which a single instance of a software application serves multiple customers. — Talha Junaid
– Talha Junaid, Commented Jul 9, 2018 at 11:04
@TalhaJunaid My BE has the capability of serving multiple clients. But my issue is how to use same FE for all clients — kasunb
– kasunb, Commented Jul 9, 2018 at 11:07
@kasunbamunusingha it would be nothing more than changing the endpoint of your BE based on your client id which could be decided before app launches in APP_INITIALIZER. — candidJ
– candidJ, Commented Jul 9, 2018 at 12:38

Nestor · Accepted Answer · 2018-07-09 11:28:42Z

2

You can achieve that behaviour with a resolver and a variable of the client.

export let AppRoutes = [
{
    path: '',
    children: [
        {
            path: '',
            component: Choose the brand component (if there is any)
        },
        {
            path: ':client',
            resolve: {
                brand: ClientServiceInfo
            },
            children: [ ... ]

The resolver

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
import { ClientService } from '.....';
import { LocalService } from '.....'
@Injectable()
export class BrandResolver implements Resolve\<Brand\> {
constructor(
    private brandService: ClientService,
    private LocalService: AppStatusService) {
}
resolve(route: ActivatedRouteSnapshot): Observable<Brand> {const clientName = route.params['client'];







    return this.ClientService.whateverRetrieveInfo(clientName).subscribe((client: any) => {
        // Add some basic information related to the client on the localService
// Voila entire success to the rest of the logic o

    });
}

}

You have to work it out what information do you need for the client :)

Hope this answer is good for you!

edited Jul 9, 2018 at 11:28

answered Jul 9, 2018 at 11:07

Nestor

69412 silver badges25 bronze badges

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

5 Comments

kasunb Over a year ago

Thanks for the help. Can you please give me some example code which suitable for my router url change example

kasunb Over a year ago

Thanks for the answer. One more thing. Is there any way to load favicon using angular service ?

Nestor Over a year ago

Just load it in the html wrapper as a normal page. Remember that the base is angular is a spa

kasunb Over a year ago

what I want is to change the favicon based on the client (depending on X or Y)

kasunb Over a year ago

Thanks for the help guys. I found this solution for the favicon change. bennadel.com/blog/…

Collectives™ on Stack Overflow

Access multiple clients using same angular 5 deployment

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related