Learning Angular: Modules
I am sharing the continuation of my journey into Learning Angular.
I will continue from the ending of my last
article
and look into why Angular CLI makes changes to the app.module.ts
file when creating a component by trying to use a manually created component.
You will gain an understanding of the connection between components and the module system. I will go over quickly the anatomy of the module file.
This article will take you less than four minutes to read.
Introduction
Making an Angular component is easy, just create a file with proper
contents
article
With expected values. A component and all required contents can be a
single file, for example, this
src/app/hello-world-manual.component.ts
We can use Angular CLI to automatically generate component for us, even have the same file above using certain options, say:
Even with the options, one change Angular CLI makes to
app.module.ts
:
Why does Angular CLI make additional entries in app.module.ts
? What
does it have to do with the AppComponent and the HelloWorldComponent?
Use HelloWorldManualComponent
To understand why Angular CLI makes those particular changes to the
app.module.ts
file, let’s try and use our manually generated
HelloWorldManualComponent
.
Make sure manual component template has the following entries:
- selector = ‘hello-world-manual’,
- template =
<p>hello world manual component</p>
,
(the file contents will be the same as the above example)
app.component.html
Changes
To use the HelloWorldManualComponent
, let’s put it in the
app.component.html
file so the file’s contents are below:
Let Magic Begin
With the HelloWorldManualComponent
setup in AppComponent
’s
template, let’s display results in the browser.
Response from ng serve
look good:
The browser displays the following:
That’s not expected, even the test 6 app
text doesn’t show up!
What’s going on??
What does the page inspector show?
If we change app.module.ts
to the following:
The web page at localhost:4200 should have the following contents:
What is happening?? To use the hello-world-manual
component in the
app-component
, why does app.module.ts
need to import it?
Let’s go over the anatomy of the app.module.ts
section:
NgModule - Declarations
The following is the declaration section:
This defines the components and directives to include in the
app.module
. Hence, without having HelloWorldManualComponent
, using
the hello-world-manual
component in the app.component
would be
impossible.
NgModule - Imports
The imports section:
In this case, only imports the BrowserModule
, that has all the
modules to run Angular in a
browser.
NgModule - Providers
This section is empty in our case:
To use any services for the app, this is section to declare them.
NgModule - Bootstrap
This section:
Does not refer to the Bootstrap CSS library, it refers to what to include on first start up. (If you do include Boostrap CSS library, this file gets a bit more confusing.)
To use the hello-world-manual
component in the index.html
file,
declare HelloWorldManualComponent
here.
Conclusion
After seeing what Angular CLI does differently when generating a
component compared to creating the component manually shows the
importance of app.module.ts
.
The app.module.ts
file configures Angular how to compile and
inject the application
together. It puts the other files required for your app to be
functional, also letting you separate out components into smaller and
reusable files.