In this lecture, we're going to turn on production mode to boost the performance of our application.
It's one of the most important steps we can take to have a performant app.
To understand why, we need to talk about a feature called change detection.
If you're familiar with React or Vue, you may know this feature as reactivity.
If not, that's fine as well.
Change detection is the process of updating the HTML document whenever data changes in an app.
For example, if you press a button, upload a file, send a request or type in a form change detection
will run.
Angular will check the data in an app.
If the data changes, it will reflect those changes in the HTML.
It's the main selling point of Angular.
Instead of refreshing the page like regular sites, bits and pieces of an app can be updated dynamically.
It can synchronize the data in our app with HTML.
Change detection occurs on one of three occasions.
It'll run when our app loads for the first time.
This will give Angular an opportunity to display the default data in your app.
The second occasion is when an event occurs, like clicks or form submissions.
Lastly, we can manually trigger change detection.
It's not common to force change detection, but it is possible.
It's rare, but change detection can introduce some problems in our app.
They can be difficult to debug since change detection is a complex system.
Angular helps us by running change detection twice during development.
Think of it like this.
Have you ever played the game called Spot the Difference?
It's a game where two images are shown side by side.
The goal is to find the differences between each image.
Angular does something similar.
When our app is initialized, it'll run change detection twice.
It doesn't matter if the data changes in our app.
After running change detection twice, it'll compare the results of both outputs.
If the app outputs different results, that means we've done something wrong.
If our data doesn't change, that means the template shouldn't change either.
Consistency is key in any application.
Users should be able to refresh their browser without seeing a completely different app.
This additional check can be helpful for debugging.
It's rare to experience this issue, but it can happen as long as you follow best practices, you should
be able to avoid this issue altogether.
This behavior is great for debugging.
However, it's not something we should want in a production app.
If we leave it enabled, it could impact the performance of our app.
We should turn off this behavior when we ship our app to production.
Let's try doing that by default.
Angular has configured our application to enable this behavior for development.
Open the angular JSON file.
In this file search for a property called projects.
Basic architect.build dot configuration.
There are two objects called production and development.
As you can guess, the production object contains settings for production mode.
The development object contains settings for development mode.
If we look inside the development object, there's a setting called optimization.
This option is the most important setting.
By setting it to true, Angular will not run change detection twice on initialization.
Remember, this behavior is helpful for debugging an app.
It's a feature we should leave on during development.
Since this object configures the development environment, it makes sense to turn this setting off by
setting it to false.
By default.
The value is true, which is why you won't find it in the production object.
Even though we didn't have to change anything, I wanted to point out change detection.
Let's go back to the Main.ts file.
We're finished preparing this file.
The code we've written is the same code in a default angular project.
Hopefully you have a better understanding of what's going on.
However, there's one file we overlooked, which was the app module file.
In the following lecture, we're going to start exploring modules.