In this session, we will understand how we can integrate Angular Material with Angular Projects. After that, we will look into how we can use those Material components in our project. And finally, we will understand how can we create custom themes with Angular Material in our Angular project.

1. Presented By:
Shubhrank Rastogi Devanshu Kumar Verma
Sr. Software Consultant Software Consultant
Using Angular in
multi-environment
ENVIRONMENTS

2. Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
Punctuality
Respect Knolx session
timings, you are requested
not to join sessions after a 5
minutes threshold post the
session start time.
Feedback
Make sure to submit a
constructive feedback for all
sessions as it is very helpful
for the presenter.
Silent Mode
Keep your mobile devices in
silent mode, feel free to
move out of session in case
you need to attend an urgent
call.
Avoid Disturbance
Avoid unwanted chit chat
during the session.

3. Agenda
01
● What is an environment?
○ In Software development
● Environments in Angular
○ Default environments
○ Most common environments
○ Need of environments
○ Creating custom environments
● Demo
○ Angular app with multi envs
○ Multi app project with multi envs
1

4. What is ENV?
In computer science - environment is a set of hardware + software + data + system
configurations that let a program operates properly.
● For example, if a program is running in a Windows environment, it means the program is
utilizing the Windows operating system.
● Similarly if a program is running in a Linux environment, it means the program is utilizing
the Linux operating system.
2

5. Environments
in Angular
01
● An Angular Application Environment is JSON
configuration information that tells the build
system which files to change when you use ng
build and ng serve.
● By default angular provides us with two
environment files.
3

6. Most common
ENVs
01
● Development
○ The development environment (dev) is the environment in
which changes to software are developed, most simply an
individual developer's workstation.
● Testing
○ The purpose of the test environment is to allow human
testers to exercise new and changed code via either
automated checks or non-automated techniques.
4

7. Most common
ENVs
01
● Staging
○ A stage or staging environment is an environment for testing that
exactly resembles a production environment. It seeks to mirror an
actual production environment as closely as possible and may
connect to other production services and data, such as databases.
● Production
○ The production environment is also known as live, particularly for
servers, as it is the environment that users directly interact with.
5

8. Need of ENVs
in Angular
01
● Let’s say you have a back end REST API deployed on a server that provides
services to your Angular application.
● You might have a URL for your own development server, another for the test server,
and another for the production server.
● You might also want to have certain specific configurations of your app that
should only be available in certain server.
● You can also trigger a specific feature of your application, via logically checking
the environment file for a specific environment.
6

9. Any Questions?

10. ● Go to environments directory and create a ts file with the specific name of the environment like for QA
(Quality Assurance) environment, the file name -
■ environment.<environment-name>.ts
■ environment.qa.ts
● Once you have the file, add on the code from the other environment files-
7
Creating Custom ENVs

11. ● Update the angular.json file with the new environment file inside the build and serve keys.
8
Creating Custom ENVs

12. ● Update the angular.json file with the new environment file inside the build and serve keys.
Creating Custom ENVs
9

13. ● You have successfully created a custom environment, now you can use it with ng build and ng serve
commands.
● To build and serve for a specific environment, you just need to give a option of –configuration to the
CLI commands
○ ng build --configuration=production OR ng build --configuration production
○ ng serve --configuration=qa OR ng serve --configuration qa
Creating Custom ENVs
10

14. DEMO

15. REFERENCES:
● https://medium.com/@tiptopcoder/a-guide-to-multi-environment-application-750276aa09dd
● https://dev.to/nikosanif/using-shared-settings-between-multiple-environments-in-angular-1d0e
● https://angular.io/guide/file-structure
● https://blog.knoldus.com/managing-multiple-projects-in-angular-workspace/
● https://www.pcmag.com/encyclopedia/term/environment
● https://www.computerhope.com/jargon/e/environm.htm#:~:text=The%20term%20environment%20ref
ers%20to,utilizing%20the%20Windows%20operating%20system.
● https://mokkapps.de/blog/how-to-build-an-angular-app-once-and-deploy-it-to-multiple-environments/
● https://www.tektutorialshub.com/angular/angular-multiple-apps-in-one-project/
● https://octoperf.com/blog/2019/08/22/kraken-angular-workspace-multi-application-project/#create-a-w
orkspace

16. Thank You :)
www.knoldus.com
hello@knoldus.com
@Knolspeak
Stay in Touch