Just want to learn how Angular builds and runs behind the scenes?
Below is what I understood thus far. Want to know if I missed something.
How Angular builds
After coding our Angular apps using TypeScript, we use the Angular CLI command to build the app.
ng build command compiles the application into an output directory and the build artifacts will be stored in the dist/ directory.
Internal Process
1. Angular CLI runs Webpack to build and bundle all JavaScript and CSS code.
2. In turn Webpack calls the TypeScript loaders which fetches all .ts file in the Angular project and then transpiles them to JavaScript i.e to a .js file, which browsers can understand.
This post says Angular has two compilers:
View Compiler
Module Compiler
Questions on builds
What is the sequence of calling the build process?
Angular CLI first calls Angular built-in compiler written in TypeScript => then calls the TypeScript Transpiler => then calls the Webpack to bundle and store in the dist/ directory.
How Angular runs
When build is completed, all our app's components, services, modules etc are transpiled to JavaScript .js files which is used to run the Angular application in the browser.
Statements in Angular Docs
When you bootstrap with the
AppComponentclass (in main.ts), Angular looks for a<app-root>in theindex.html, finds it, instantiates an instance of AppComponent, and renders it inside the<app-root>tag.Angular creates, updates, and destroys components as the user moves through the application.
Questions on runs
Although main.ts is used in the statement above for explaining the bootstrap process, Isn't Angular app is bootstrapped or started using JavaScript .js files?
Isn't all the above statements are done runtime using JavaScript .js files?
Does anyone know how all parts fit together in depth?
6 Answers
(When I say Angular I mean Angular 2+ and will explicitly say angular-js if I am mentioning angular 1).
Prelude: It is confusing
Angular, and probably more accurately angular-cli have merged together a number of trending tools in Javascript that are involved in the build process. It does lead to a little bit of confusion.
To further the confusion, the term compile was often used in angular-js to refer to the process of taking the template's pseudo-html and turning it into DOM elements. That's part of what the compiler does but one of the smaller parts.
First of all, there is no need to use TypeScript, angular-cli, or Webpack to run Angular. To answer your question. We should look at a simple question: "What is Angular?"
