Bootstrap an Angular Application

Photo by Braden Collum on Unsplash

Angular is today, with its 10 versions released since 2010, still a fixed point for the development of Web applications.
Thanks to its early release compared to direct competitors, its well-articulated documentation and popularity in 2020 that makes it second only to React, the future of the Google’s framework will surely have a long life.

However, developers very often set about building websites with Angular without ever going through the start.
For this reason today we will not focus on how to build an Angular application, but we will take a closer look at the framework’s bootstrapping phase.

File: main.ts

From Angular documentation, the main.ts file is

The entry point for you application. Compiles the application with the JIT compiler (or AOT compiler adding the flag “aot” for the build command) and bootstraps the application’s root module (AppModule) to run in the browser

Therefore, in simple terms main.ts is not a module but simply an imported script-file from the index.html and run from top to bottom in order to start our application in the browser.

It is from here that the root Module is defined, in which are explicated components, services, providers, routes etc.

The reason this is called “main” is purely conventional, as it might have
whatever name the developer wants, as long as you change the reference to the startup file within angular.json.

Typically, within this file, the environment in which the application is located is checked (e.g. production or development).
This is because, through the “enableProdMode()” function, Angular will be aware of the environment in which you are and will behave differently.

Certainly, among the most important things that Angular does between the development environment and the production one, there is “changeDetection”.

Anyone who has been working with Angular for some time knows how bad the following error is.

Image from stackoverflow.com

This happens because Angular makes a “change detection” for any changes that have occurred in the app.

Now, in the production environment, after checking everything, Angular renders changes to views.
On the contrary, in the development environment, it checks everything and then checks again that there aren’t inconsistencies with the previously verified values.
If one of these has changed, here is the error message I showed you above.

Among other things that the “enableProdMode()” does, there is certainly the reduction of the logging activity of Angular.
If in the development environment, the framework signals warnings such as URL sanitation or classic Javascript errors, in a production environment, Angular spares us all this.

Moreover, the fact that it is the main that defines the “root Module” certainly suggests that inside the file, it is not possible to use the application services because we are still outside Angular.

File: angular.json

The angular.json file is responsible for the build configuration and development of the project.
Among the various properties that can be set, certainly, the one that most interests us at this moment is the definition of the project and its startup files.

Part of angular.json

As you can see from the code above, in addition to the possibility of creating multi workspaces project, within each project we specify the path for the main file and the path for the index, in which there is the “app-root” selector that allows us to view the contents of the app.component.html file.

AppModule

AppModule is the main module of our application.
Technically it could be any module of the project but by convention, the AppModule is used.

Unless separated into multiple modules and then imported into the root module, all components, services, providers, routes etc need to be imported here.

APP_INITIALIZER

The APP_INITIALIZER, an instance of InjectionToken, is certainly very important but often rarely used.
Angular executes the function provided by this token when the application loads.

If the function returns the promise, then Angular will wait until the promise is resolved.

The APP_INITIALIZER can tend to be created to preload configurations related to language or data necessary for the application or even retrieve the application access URL without the URL encoding created automatically by Angular.

In short, this function is certainly among the coolest of the framework and it is placed between the main.ts and the actual start of the application.
Angular has already started doing its job here, however, it is waiting for all configurations to be complete before showing the app-root.

Reflections

Why does Angular bootstrap itself in this way?

In reality, there is a good reason why it does so.
Since Angular is not a web-only based framework but it is possible to write components that run in Cordova, NativeScript, Ionic and so on, during the bootstrapping process, we can import the platform that we prefer depending on the environment in which we find ourselves.

In fact, in our case the import was:

Conclusions

Knowing the tools with which we are preparing to work is certainly an extra arrow to our bow, especially if it is possible for us to improve performance, develop according to conventions so as to have a more readable and maintainable code and to have clear what is possible to do in every part of our application.

If you like this article press 👏 clap button 50 times or as many times you want. Feel free to ask a question if you have any. Thanks a lot for reading!

👨‍💻 Software dev ~ Frontend fan 🧙 ~ Alexa & AmazonSumerian enthusiast 🔮 ~ Those who can imagine anything, can create the impossible 💙

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store