Environment configuration files define variables that differ between development and production environments. They are located in src/environments/.
Environment type
The Environment type defines the structure for all environment configurations:
export type Environment = {
appName: string;
apiUrl: string;
cookies: string;
securityOpen: boolean;
};
The display name of the application. Can include environment suffix for identification.
The base URL for API requests. Should point to your backend server.
Cookie policy setting. Values: 'none', 'all', or other cookie policy strings.
Controls whether security restrictions are relaxed for development. Set to true in development, false in production.
Production environment
Defined in src/environments/environment.ts:
import { Environment } from './environment.type';
export const environment: Environment = {
appName: 'Activity Bookings',
apiUrl: 'http://localhost:3000/api',
cookies: 'none',
securityOpen: false,
};
Development environment
Defined in src/environments/environment.development.ts:
import { Environment } from './environment.type';
export const environment: Environment = {
appName: 'Activity Bookings (development)',
apiUrl: 'http://localhost:3000/api',
cookies: 'all',
securityOpen: true,
};
Key differences
| Property | Production | Development |
|---|
appName | 'Activity Bookings' | 'Activity Bookings (development)' |
cookies | 'none' | 'all' |
securityOpen | false | true |
Using environment variables
Import and use environment variables in your application:
import { environment } from '../environments/environment';
// Use in services
@Injectable({
providedIn: 'root'
})
export class ApiService {
private apiUrl = environment.apiUrl;
constructor(private http: HttpClient) {}
getData() {
return this.http.get(`${this.apiUrl}/data`);
}
}
ng serve or ng build → uses environment.development.tsng build --configuration production → uses environment.ts
Adding new environment variables
- Update the type definition in
src/environments/environment.type.ts:
export type Environment = {
appName: string;
apiUrl: string;
cookies: string;
securityOpen: boolean;
newProperty: string; // Add your new property
};
- Add the property to both environment files:
// environment.ts
export const environment: Environment = {
appName: 'Activity Bookings',
apiUrl: 'http://localhost:3000/api',
cookies: 'none',
securityOpen: false,
newProperty: 'production-value',
};
// environment.development.ts
export const environment: Environment = {
appName: 'Activity Bookings (development)',
apiUrl: 'http://localhost:3000/api',
cookies: 'all',
securityOpen: true,
newProperty: 'development-value',
};
- Use the new property in your application:
import { environment } from '../environments/environment';
const value = environment.newProperty;
Build configuration
The Angular build system uses file replacements defined in angular.json to swap environment files:
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.development.ts"
}
]
}
}