Learn How to Use Angular Environment Variables with Custom Webpack

This video will teach you how to create environmental variables using an angular custom webpack configuration.

The goal is to create the environment variables from the terminal (useful even for CI systems), and also use the .env file.

At first, you will see how to use the webpack's EnvironmentPlugin and then an improvement that replaces the EnvironmentPlugin with the DotEnvPlugin

✨ Chapters:
0:00 Intro
4:27 Use process in Angular
5:26 Setup a custom webpack configuration
7:59 Using EnvironmentPlugin
10:42 Using DotEnvPlugin
15:14 Thank you

******************************************************
Let's connect
******************************************************

#angular #learnAngular #angularTutorial #webdevelopment #webdeveloper #angularenvironemtvariables #angularenvironmentsetup

[swapnasaritnayak]

It only works with ng serve, not with ng build?

[mrblue]

You are the best one who talk about .env in angular .. Thank you..❤

[AmarKoulavkar]

Great explanation. you are a great teacher!

[augustine]

amazing video, exactly what I need, thank you.

[ranjanadeore]

Thank you sir uploading great tutorials with great explanation

[arthurfedotiew]

Fanis, you are a great teacher I must say!
The content of this particular video is going to save me a lot of headache now, thank you!)
Though, I would personally want you to make more and more advanced content which would be of great value given your awesome educational skills)
E.g. I remember you being a guest at AngularAir when you were talking about LazyLoading Angular Components - that is the level I am talking about))

[vandyrock]

I love the way he speaks in english😊Thanks for the best explanation ❤ I dont know why this channel is so underrated.Its the best explanation I found so far.

[OlehBiblyi]

That's amazing, thanks for tutorial!

[melcooldev]

Hello! Great videos, really helpful
I have one question: Can I know what are you using as an extension or something in VSCode, I see that any method/function argument is prefixed with a hint/definition

[thangluong]

how do you stop the soft from chaning when you pick a guitar soft or so, it softs different when i test it out on the side and different

[MsLotus]

Hello there! I am using Angular 16n and the custom-webpack only goes to version 15. Is there another way to do this with Angular version 16?

[chiraggadhvi]

How to dockerize this approach where i can pass the values in my .env during the docker runtime ?

[alinisar]

hi, i have 1 question. how can i keep this api key secure. as application is deployed and its accessible to user.

[renugupta]

Can I use this approach while deploying on any cloud?

[ranjanadeore]

Sir please upload video on configure proxy url for api call thank you.

[wdnrkww]

Hi, I can see these env variable in main.js file in browser directly.after implementing this

[Florencioo]

In Angular 17 this tutorial does not work. Could you guide me on what I can do?

[swixx]

I'm getting. The term API_KEY=B is not recognized as name of the cmdlet, function, script file

[CsAlchemy-egch]

I tried in local works fine but i got a problem when deploying to vercel, the process.env can't access the env variables defined in vercel .. anf surely I can't commit .env to my repo .. what's the solution?

[murhafsousli]

Can you add an update for Angular 17 and ESBUILD instead of webpack