How can I use environment variables in Angular CLI?

How can 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. You can define your variables there and access them in your application.

Can you show me an example of how to set this up?

Sure! In your src/environments folder, create environment.ts and environment.prod.ts. For example, in environment.ts, you can have:

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

And in environment.prod.ts:

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);

What if I want to add more variables later?

You can simply add more properties to the environment object in both environment.ts and environment.prod.ts files as needed.