Disabling and Enabling Production Mode in Angular
Let's look at how we can test initial stages without changing the URL every time and being able to change our environment's file names.
Jan 13, 2020 • 5 Minute Read
Introduction
In this guide, we are going to learn about production mode. If you haven't heard this term before, don't worry—I'll walk you through all the concepts of production mode and explain why it's important in the development of a website.
Let's Get Started
As you know, website development is a combination of front-end development and back-end development. On both ends, you need to write the business logic as per requirement analysis documentation and you need to test many times.
Suppose you have your server on AWS, you have deployed your back-end on AWS, and now you're trying to use an AWS URL for development mode. This can be very costly, and businesses don't want to raise their budgets.
That's why, in development, we use a localhost to test in the initial stages. We don't need to hit the AWS server, and that helps save money.
Do I Need to Change the URL Every Time?
Now you may be wondering: Do I need to change the URL every time I switch between AWS Server and localhost?
No. Angular provides the configuration to keep both the URLs and use them conditionally.
If you create the project from cmd using the below command ...
ng new project-name
... then Angular creates all necessary folders automatically.
In your Angular application, there will be a folder called environments. In that folder, you can see two files: environment.ts and environment.prod.ts
environment.ts
export const environment = {
production: false
};
environment.prod.ts
export const environment = {
production: true
};
Both files are the same in structure except for one thing. In the environment.prod.ts file, we have production: true, which helps you understand that production build will take this file instead of environment.ts.
Can I Change the File Names of the Environment?
You may also be wondering whether you can change the file name of the environment. The answer is yes. Why not? But you need to add some more configuration. You need to tell Angular that you have different files by defining the file name in Angular configuration.
So now the question is, where do you need to make the changes so that Angular will know the files and use them in production mode.?
Angular.json
In your application, you have a file called angular.json. I won't go into the whole configuration of angular.json. I''ll just tell you the key changes you need to make in angular.json so Angular can use your files instead of the default files.
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
There is a configurations object in angular.json where you can see the configuration related to production. You just have to change the path in the fileReplacements array. In replace key, you need to give the path of the file you're going to use in development mode. And in with key, you need to give the path of the file that you're going to use in production mode.
But at the time of the build, you also have the option to choose the files. if you make a build using below command :
ng build
Then it will take the configuration of production mode. But if you have to specify that you have to use the configuration of production mode, make a build using the below command:
ng build --prod
Conclusion
This guide was all about enabling and disabling production mode. You can read more about it here. I hope you have enjoyed this guide. Keep learning more and more and I will help to make your learning as simple as I can.