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.
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
## 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:
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:
@ -32,10 +31,10 @@ Subdomain resolver:
export const environment = {
export const environment = {
//...
//...
application: {
application: {
baseUrl: 'https://{0}.mydomain.com/'
baseUrl: "https://{0}.mydomain.com/",
},
},
//...
//...
}
};
```
```
**{0}** is the placeholder to determine current tenant's unique name.
**{0}** is the placeholder to determine current tenant's unique name.
@ -44,7 +43,6 @@ After the configuration above, if your app runs on the `mytenant1.mydomain.com`,
> **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.
> **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:
Domain resolver:
```js
```js
@ -53,10 +51,10 @@ Domain resolver:
export const environment = {
export const environment = {
//...
//...
application: {
application: {
baseUrl: 'https://{0}.com/'
baseUrl: "https://{0}.com/",
},
},
//...
//...
}
};
```
```
After the configuration above, if your app runs on the `mytenant.com`, the app will get the tenant name as **mytenant**.
After the configuration above, if your app runs on the `mytenant.com`, the app will get the tenant name as **mytenant**.
@ -71,29 +69,28 @@ The **{0}** placeholder can be put to the API URLs in the environment to determi
export const environment = {
export const environment = {
//...
//...
application: {
application: {
baseUrl: 'https://{0}.mydomain.com/',
baseUrl: "https://{0}.mydomain.com/",
//...
//...
},
},
oAuthConfig: {
oAuthConfig: {
issuer: 'https://{0}.ids.mydomain.com',
issuer: "https://{0}.ids.mydomain.com",
//...
//...
},
},
apis: {
apis: {
default: {
default: {
url: 'https://{0}.api.mydomain.com',
url: "https://{0}.api.mydomain.com",
},
},
AbpIdentity: {
AbpIdentity: {
url: 'https://{0}.identity.mydomain.com',
url: "https://{0}.identity.mydomain.com",
},
},
},
},
}
};
```
```
> **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.
> **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:
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:
```js
```js
// environment object in ConfigState
// environment object in ConfigState
@ -128,8 +125,8 @@ The app sends the `__tenant` header that contains the current tenant id on each
`SubscriptionService` is a utility service to provide an easy unsubscription from RxJS observables in Angular components and directives. Please see [why you should unsubscribe from observables on instance destruction](https://angular.io/guide/lifecycle-hooks#cleaning-up-on-instance-destruction).
`SubscriptionService` is a utility service to provide an easy unsubscription from RxJS observables in Angular components and directives. Please see [why you should unsubscribe from observables on instance destruction](https://angular.io/guide/lifecycle-hooks#cleaning-up-on-instance-destruction).
@ -200,4 +200,4 @@ class DemoComponent implements OnInit {
`TrackByService` is a utility service to provide an easy implementation for one of the most frequent needs in Angular templates: `TrackByFunction`. Please see [this page in Angular docs](https://angular.io/guide/template-syntax#ngfor-with-trackby) for its purpose.
`TrackByService` is a utility service to provide an easy implementation for one of the most frequent needs in Angular templates: `TrackByFunction`. Please see [this page in Angular docs](https://angular.io/guide/template-syntax#ngfor-with-trackby) for its purpose.
Levent Arman Özak
6 years ago
GitHub