Bootstrapping your Angular Application

It is helpful to understand how your Angular application boots.

I recently wrote an article about how to get started with the Angular CLI. This is an awesome productivity tool when it comes to getting started with Angular. With it we can quickly create, build and run our applications. 

Bootstrapping Angular

This is really helpful but it also adds a little layer of magic to your application. If you always use the CLI but don’t take the time to appreciate what is happening behind the scenes you won’t understand how to fix problems when they come up. In this article, we are going to look at how Angular boots up your application. 

Creating a new Angular Application

When you use the Angular CLI to create a new application you get a bunch of files and directories created for you. 

We also know that we can use the CLI to run the application using the following command. 

This is great and makes our lives easier as we don’t have to worry about the nuts and bolts of the application. When we start our application though we don’t know what Angular is doing under the hood so let’s actually walk through that now. 

Bootstrapping Angular

Every application we build has an entry point. When we run the hello-angular application above using ng serve it will first look at the file angular-cli.json. This file contains some information about the application but the main setting we want to look at here is line 15 which tells us “main.ts” is our main file.

If we look at the file src/main.ts we will see the following code. 

The last line is where the magic happens and the bootstrap process boots an Angular module called AppModule. If you look under src/app you will see a file, app.module.ts and this is our AppModule that gets called. 

The AppModule contains some declarations and imports but it also contains one very important line. 

This is telling Angular what component it should load as the application’s top level component. So now the app component is loaded that looks like this. 

The class sets a title variable and displays it in the template and this is why you see ‘app works‘ when you fire up your application for the first time. 

Bootstrapping Angular

Bootstrapping Angular Conclusion

If you have done any work in Angular 2/4 you will know that we build out our applications using this component model. What you might not of understand is how that top-level component was called so I really hope this quick tutorial helped clear that up for you. 

Question: Do you have any questions about the initial application the Angular CLI creates for you? 

Hi, I’m Dan Vega. I am a Software Engineer living just outside of one of my favorite places in the world, Cleveland, Ohio. I am a self-taught programmer who firmly believes that you can accomplish anything in this life if you put your mind to it, roll up your sleeves and are willing to put in the work.

I have been writing software for over 18+ years now and I use my knowledge, passion, and influence to help other developers achieve their goals. I teach online and currently, have over 30,000 students.

When I am not writing software, I have a number of things that really keep me busy. I love to read books, listen to podcasts and watch online courses. I have a real thirst for knowledge and it consumes me every single day of the week. I also love to run & lift heavy weights which keep me balanced throughout the week.

Please note: I reserve the right to delete comments that are offensive or off-topic.