How do I use environment variables in Angular CLI?

How do I use environment variables in Angular CLI?

You can use environment variables in Angular CLI by creating environment files like environment.ts and environment.prod.ts. These files can hold different configurations for development and production.

Can you show me how to set up these environment files?

Sure! In your Angular project, navigate to the src/environments folder. You should see environment.ts and environment.prod.ts. You can define your variables like this:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};

And in environment.prod.ts, you can set:

export const environment = {
  production: true,
  apiUrl: 'https://api.example.com'
};

How do I access these variables in my components?

You can access these variables by importing the environment file in your component. For example:

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

console.log(environment.apiUrl);

Is there a way to use different environment files for different builds?

Yes! You can specify different environment files in your angular.json file under the fileReplacements section for different configurations.