Multi Tenancy in Angular UI

ABP Angular UI supports the multi-tenancy. The following features related to multi-tenancy are available in the startup templates.

Tenants Page

Tenants page

On the page above, you can;

  • See the all tenants.
  • Create a new tenant.
  • Edit an existing tenant.
  • Delete a tenant.

Tenant Switching Component

Tenant Switching Component

You can switch between existing tenants by using the tenant switching component in the child pages of the AccountLayoutComponent (like Login page). Angular UI sends the selected tenant id to the backend as __tenant header on each request.

Domain Tenant Resolver

Angular UI can get the tenant name from the app running URL. You can determine the current tenant by subdomain (like mytenant1.mydomain.com) or by the whole domain (like mytenant.com). To do this, you need to set the application.baseUrl property in the environment:

Subdomain resolver:

  1. // environment.prod.ts
  3. export const environment = {
  4.   //...
  5.   application: {
  6.     baseUrl: 'https://{0}.mydomain.com/'
  7.   },
  8.   //...
  9. }

{0} is the placeholder to determine current tenant’s unique name.

After the configuration above, if your app runs on the mytenant1.mydomain.com, the app will get the tenant name as mytenant1. Then, the app will call the /api/abp/multi-tenancy/tenants/by-name/mytenant1 endpoint to check if the tenant exists. If the tenant (mytenant1) exists, the app will keep this tenant data and send its id as __tenant header to the backend on each request. If the tenant does not exist, the app will not send __tenant header to the backend.

Important Note: If you define the baseUrl with the placeholder ({0}), the tenant switching component in the child pages of the AccountLayoutComponent (like Login page) will be hidden.

Domain resolver:

  1. // environment.prod.ts
  3. export const environment = {
  4.   //...
  5.   application: {
  6.     baseUrl: 'https://{0}.com/'
  7.   },
  8.   //...
  9. }

After the configuration above, if your app runs on the mytenant.com, the app will get the tenant name as mytenant.

Tenant Specific Remote Endpoints

The {0} placeholder can be put to the API URLs in the environment to determine tenant specific endpoints.

  1. // environment.prod.ts
  3. export const environment = {
  4.   //...
  5.   application: {
  6.     baseUrl: 'https://{0}.mydomain.com/',
  7.     //...
  8.   },
  9.   oAuthConfig: {
  10.     issuer: 'https://{0}.ids.mydomain.com',
  11.     //...
  12.   },
  13.   apis: {
  14.     default: {
  15.       url: 'https://{0}.api.mydomain.com',
  16.     },
  17.     AbpIdentity: {
  18.       url: 'https://{0}.identity.mydomain.com',
  19.     },
  20.   },
  21. }

Important Note: The application.baseUrl and the {0} placeholder in the value of the baseUrl property are required to be able to get tenant from running URL. Other placeholders in API URLs are optional.

After the configuration above, if your app runs on the mytenant1.mydomain.com, the app will get tenant name as mytenant1 and replace the environment object in ConfigState on app initialization as follows:

  1. // environment object in ConfigState
  3. {
  4.   //...
  5.   application: {
  6.     baseUrl: 'https://mytenant1.mydomain.com/',
  7.     //...
  8.   },
  9.   oAuthConfig: {
  10.     issuer: 'https://mytenant1.ids.mydomain.com',
  11.     //...
  12.   },
  13.   apis: {
  14.     default: {
  15.       url: 'https://mytenant1.api.mydomain.com',
  16.     },
  17.     AbpIdentity: {
  18.       url: 'https://mytenant1.identity.mydomain.com',
  19.     },
  20.   },
  21. }

After this replacement, the app will use the following URLs:

  • https://mytenant1.ids.mydomain.com as IdentityServer URL.
  • https://mytenant1.api.mydomain.com as default URL.
  • https://mytenant1.identity.mydomain.com as AbpIdentity remote endpoint URL.

The app sends the __tenant header that contains the current tenant id on each request.

See Also

What’s Next?