How Angular Project Works

Without any introductions. What is the meaning of (How Angular Project Works)? The meaning of the title is how the angular project starts, the order of files that will be called, and how it will be executed. Take the role of investigator, and let's start.


The Starting Point

The starting point of the angular project is the "main.ts" file. It is the initialization of the project and the first file will be executed.

After this file is executed, it will bootstrap(call) the "app.module.ts" file after importing it.

"app.module.ts" File

After calling the "app.module.ts" file, you will notice an array named "bootstrap." This array lists the components that angular should know about.

As you see here, the app component(the main component) is assigned to the "bootstrap" array, so angular will know it, and will call the "app.component.ts" file.

"app.component.ts" File

at this point, angular will read this app component and read the configuration about it, so it will know "app-root" (selector is the html tag that we will call the component with like "<app-root></app-root>") as the selector of this component.

After that, the "index.html" file will be loaded and it will know which component to use, the "app-root" selector will be replaced with the content of the view template(the html, css, and js of this component) of the app component.

The Script Files

After serving your project, right-click, and click "Inspect." At the end of your code, you will notice(I used this expression many times in the article, I am sorry😢)script files like

<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>

and other script files. These script files will be injected by angular cli in the "index.html" file when serving the project.

Side Note

When we use the "ng serve" command, it will do four things:

  1. Recompile the angular project.

  2. Create the bundles that you see.

  3. Inject the bundles in "index.html".

  4. Start the live development server.


Conclusion

I know it may seem like theoretical information, but I faced an error depending on the order of the files that will be executed.

So, it is all I have today.

Thank you for reading.