Environment

Every application needs some environment variables. In Angular world, this is usually managed by environment.ts, environment.prod.ts and so on. It is the same for ABP as well.

Current Environment configuration holds sub config classes as follows:

export interface Environment {
  apis: Apis;
  application: Application;
  oAuthConfig: AuthConfig;
  production: boolean;
  remoteEnv?: RemoteEnv;
}

Apis

export interface Apis {
  [key: string]: ApiConfig;
  default: ApiConfig;
}

export interface ApiConfig {
  [key: string]: string;
  rootNamespace?: string;
  url: string;
}

Api config has to have a default config and it may have some additional ones for different modules. I.e. you may want to connect to different Apis for different modules.

Take a look at following example

{
  // ...
  "apis": {
    "default": {
      "url": "https://localhost:8080"
    },
    "AbpIdentity": {
      "url": "https://localhost:9090"
    }
  }
  // ...
}

When an api from AbpIdentity is called, the request will be sent to "https://localhost:9090". Everything else will be sent to "https://localhost:8080"

• rootNamespace (new) : Root namespace of the related API. e.g. Acme.BookStore

Application

export interface Application {
  name: string;
  baseUrl?: string;
  logoUrl?: string;
}

• name: Name of the backend Application. It is also used by logo.component if logoUrl is not provided.
• logoUrl: Url of the application logo. It is used by logo.component
• baseUrl: For detailed information

AuthConfig

For authentication, we use angular-oauth2-oidc. Please check their docs out

RemoteEnvironment

Some applications need to integrate an existing config into the environment used throughout the application. ABP supports this out of box.

To integrate an existing config json into the environment, you need to set remoteEnv

export type customMergeFn = (
  localEnv: Partial<Config.Environment>,
  remoteEnv: any
) => Config.Environment;

export interface RemoteEnv {
  url: string;
  mergeStrategy: "deepmerge" | "overwrite" | customMergeFn;
  method?: string;
  headers?: ABP.Dictionary<string>;
}

• url *: Required. The url to be used to retrieve environment config
• mergeStrategy *: Required. Defines how the local and the remote environment json will be merged
  • deepmerge: Both local and remote environment json will be merged recursively. If both configs have same nested path, the remote environment will be prioritized.
  • overwrite: Remote environment will be used and local environment will be ignored.
  • customMergeFn: You can also provide your own merge function as shown in the example. It will take two parameters, localEnv: Partial<Config.Environment> and remoteEnv and it needs to return a Config.Environment object.
• method: HTTP method to be used when retrieving environment config. Default: GET
• headers: If extra headers are needed for the request, it can be set through this field.

Provide Environment Variable to Core Module

environment variable comes from angular host application.

import { environment } from '../environments/environment';

@NgModule({
  imports: [
    //...other imports
    CoreModule.forRoot({
      environment
    }),
  ]
})

EnvironmentService

EnvironmentService is a singleton service, i.e. provided in root level of your application, and keeps the environment in the internal store.

Before Use

In order to use the EnvironmentService you must inject it in your class as a dependency.

import { EnvironmentService } from '@abp/ng.core';

@Component({
  /* class metadata here */
})
class DemoComponent {
  constructor(private environment: EnvironmentService) {}
}

You do not have to provide the EnvironmentService at module or component/directive level, because it is already provided in root.

Get Methods

EnvironmentService has numerous get methods which allow you to get a specific value or all environment object.

Get methods with "$" at the end of the method name (e.g. getEnvironment$) return an RxJs stream. The streams are triggered when set or patched the state.

How to Get Environment Object

You can use the getEnvironment or getEnvironment$ method of EnvironmentService to get all of the environment object. It is used as follows:

// this.environment is instance of EnvironmentService

const environment = this.environment.getEnvironment();

// or
this.environment.getEnvironment$().subscribe((environment) => {
  // use environment here
});

How to Get API URL

The getApiUrl or getApiUrl$ method is used to get a specific API URL from the environment object. This is how you can use it:

// this.environment is instance of EnvironmentService

const apiUrl = this.environment.getApiUrl();
// environment.apis.default.url

this.environment.getApiUrl$("search").subscribe((searchUrl) => {
  // environment.apis.search.url
});

This method returns the url of a specific API based on the key given as its only parameter. If there is no key, 'default' is used.

How to Set the Environment

EnvironmentService has a method named setState which allows you to set the state value.

// this.environment is instance of EnvironmentService

this.environment.setState(newEnvironmentObject);

Note that you do not have to call this method at application initiation, because the environment variables are already being stored at start.

Environment Properties

Please refer to Environment type for all the properties. It can be found in the environment.ts file.