Understanding how a system starts helps me learn the system better. If
I can’t debug issues I have at the early stages (like installing a
previous
version),
debugging the issue later when it comes up just becomes harder as
there’s more places to look (or there’s places I don’t even know
about!)
I will go over how Angular works its magic when starting up a new
application.
Following Along
I am only using a blank application generated using: ng new <project
name> and modifying the contents of: app/src/app.component.html to
be: test 6 app
If you want to follow along, do the following steps with Angular
installed at the command prompt:
I use find and ag a lot in this article. find is a standard
command in most UNIX systems. ag is grep but on steroids, you can
learn more and install it for your system
here
One file: index.html
If you’re a web programmer, you will know the significance of
index.html, the default page that a web-server sends when a file is
not specified.
This file also exists in the project test6 project folder in:
src/index.html
Let’s take a look to see what it’s contents are:
This is a plain HTML page, there is not even a script tag to import.
Let’s start the application using ng serve and have the browser load
up the page and see what the browser displays:
The index.html does not show test 6 app anywhere in the file
above, yet, the browser is showing that in the body. Let’s take a look
at the source:
When the Angular app booted up, it transformed:
to:
How did this happen?? The only place where the text: test 6 app
appears is in the app.component.html file, yet the index.html does
not have any JavaScript voodoo to import this file.
Where’s the Magic ?
We know Angular is a JavaScript framework and it’s front-end
based. Where’s the magic happening??
Let’s see if there’s a JavaScript or Typescript file that will help
explain what’s going on.
Let’s start with Typescript files, using find to list out all the
files ending with ts:
Note: need -v node_modules or else find returns all *.ts files in
node_modules/
The Typescript files are in these folders:
e2e/ folder is for end to end testing.
src/environments/ folder is for environment configurations
(i.e. production vs. development).
src/app/ folder is for our code, definitely a possibility,
especially that’s where app.component.html is.
src/ folder contains three Typescript files:
main.ts
polyfills.ts
test.ts
Let’s check out the src/ Typescript files:
test.ts
The contents of test.ts contain:
Hmm - doesn’t look like this file is even used when starting the
application. Let’s move on.
polyfill.ts
The contents of the polyfill.ts file contain:
OK, this definitely looks irrelevant to getting “test 6 app” into the
index.html file. This file had code to handle other browsers, like
Internet Explorer. (Remember using that?! :-) )
Next!
main.ts
The contents of the last file in src/, main.ts, contain:
Oh - this looks interesting! I will group related items together and
go through them:
Environment
These lines process which environment the application is running as:
Is the app running in production mode? Not relevant now since this is
a brand new app.
AppModule
This is the first reference to the src/app/ folder.
Definitely relevant to the app.component.html file that contains
test 6 app.
Platform Browser Dynamic
This is interesting, the import, platform-browser-dynamic from the
@angular file is happening with:
That function calls the bootstrapModule, passing in the AppModule,
also defined in this file.
🤔
Platform Browser Dynamic
I start looking for platformBrowserDynamic definition in
@angular/platform-browser-dynamic:
Well, that is not useful as those are the files I just looked at.
Let’s go back to find and see what it turns up:
Now we’re talking!
Let’s check out a specific package file:
Digging around that file and others in the
node_modules/@angular/platform-browser-dynamic, there’s files, most
are “dynamic”, it’s contents contain:
That leads me to think: platform-browser-dynamic is probably importing
the bootstrapModule from another file! Let’s find that definition.
Bootstrap Module
Let’s search for the definition of the bootstrapModule function
using ag again:
The application_ref.js file looks like it defines the
bootstrapModule! Let’s look in that file to see if there’s a better
definition:
Looks like this is the boot up process for Angular, since it requires
to caller to pass a specific component to it: AppModule, which is
in the project as: src/app.module.ts.
AppModule
Let’s take a look at the file that defines: “AppModule”,
src/app.module.ts:
The line:
Is importing the AppComponent. Let’s check that file.
AppComponent
The file: src/app.component.ts defines the AppComponent. The file
contains:
That contains:
That holds the key to the index.html file transforming: <app-root>
to have the contents of the app.component.html file!
selector defines which element to transform
templateUrl defines what file to insert into the selector
That was easy!
The Angular Connection
Wait, how does Angular know to use main.ts ? The index.html never
defined any script tags! What’s the connection???
Going back to ag and digging for any instances of main.ts:
The relevant section of angular.json:
This configures all the relevant files of Angular, the main file,
the polyfill file, even the index.html file!
That’s the Magic of Booting Up Angular, in twelve steps!
Conclusion
A simple question: “how does angular boot up?!” took more than looking
at twelve steps in the process and eight different files. Going
through this now, I understand what files are necessary and how those
files interact with each other in Angular’s boot up process.
This has been enlightening to me and I look forward in the next steps
in learning Angular.