Full lesson https://angularfirebase.com/lessons/a-simple-explanation-of-ngmodule/

In this episode, I show you how to refactor an Angular app into different modules for better organization and maintainability.

Full NgModule FAQ https://angular.io/guide/ngmodule-faq
2024-02-04T08:26:38.120Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
968a7bf0-4b13-4911-91b8-84626b28adb0
3703df0ba76ab8cca0e51ea651cba16f0db5802a05ffbb7c410f30b1c5deac53
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, we're going to talk about NgModule and how to properly use it to organize an Angular application.
So what's the purpose of an NgModule in the first place?
The answer is it helps organize the complex relationship between views such as components and directives to data providers such as services and guards.
It works by allowing you to define all these relationships in a single file as opposed to doing it individually in every Component service as was the case in early days of Angular 2.
Now let's look inside an NG module and see what these metadata terms actually mean.
First, we have declarations, which is where you would put any component, directive, or pipe, and then it'll be privately available to that module.
If you want it to be publicly available to other modules, then you'll need to add it to the export section.
This concept is similar to public and private functions in object Oriented programming.
Components will be private by default and become public if you add them to exports.
Other modules gain access to exported components by importing that module in their own metadata.
So just to recap, declarations, imports, and exports define the relationship between components and how they're shared between different NG modules.
Next, we have the bootstrap property, which defines a component that's used to initially load your application.
By default, this will usually be the app component, which is created automatically by the Angular CLI.
The final property you should be aware of is providers.
This is where you register data providers such as services and guards that can be injected into Components within this module.
The injectable class will be available to any component in this module as well as any module that imports it.
Now let's look at some practical ways we can use NgModule to organize an application.
In this example, we have all of our components and services in the root app module that was created by default.
As our app grows larger, this file is gonna be more and more Cluttered and more and more hard to maintain.
Our goal is to refactor most of our components and services to their own modules with the exception of the app component, which we still wanna bootstrap from the root module.
Overall, this will keep the logic in our app much more organized.
Now, let's take a look at the routing module that was created by default by the Angular CLI.
A routing module should have no declarations.
It may have providers in the form of guards, and it should always export the router module.
We can add our contact list component to the router, And it will load that component imperatively when the route is activated, which in this case is just the root URL.
Depending on the complexity of your app, you may use multiple routing modules for better organization as well as lazy loading.
Now let's build a feature module to organize everything related to contacts in our app.
Feature modules will consist mostly of declarations and possibly a provider, but they should never export anything.
Their primary purpose is to organize business logic related to a specific feature.
We generate the module with the Angular CLI, then copy everything related to contacts over to it.
Notice we're also importing the common module.
That gives us access to Angular's most common features such as n g f and n g 4.
Now we can go back to the root and delete everything related to contacts, then import the contact module and add it to the imports in the root.
If we had 20 different components related to contacts, you can see how this would greatly improve the clutter in this file.
Now let's look at a shared module, also called widget modules.
They're almost identical to feature modules, except that they Add all of their declarations to the exports as well, so they can be distributed to other modules.
Common use cases include social media icons, loading spinners, and other UI elements similar to those.
Let's generate the module from the CLI then add the social icons component to both the declarations and the Or it's from there we can go ahead and import it in both the root module as well as the feature module we created in the previous step.
Now, the social icons component will be available everywhere in the app.
The last type we'll look at is a core or service module.
It has no declarations and only focuses on services for dependency injection.
Common providers to include here would be an Auth service or a Toast message service, anything that provides data globally throughout the app.
In this example, we're extracting our auth service into the core module.
We generate it with the CLI then copy over the auth service to its new home.
We can also remove the common module since we're only dealing with services here.
Back in the root, we can go ahead and Import the core module and add it to the imports with the others.
If we look over our app module now, we can see it's a lot more organized.
We just have the one declaration, No providers, the one bootstrap component, and just a handful of modules to manage.
That covers the main patterns you'll see with ng module and Angular applications.
In an upcoming video, I'll show you how to use the router along with NG modules to lazy load components.
That's it for this episode.
If you found the video helpful, please like and subscribe.
And if you wanna support the channel, consider becoming a pro subscriber at at angularfirebase.com.
For just a few bucks a month, you'll get access to exclusive content as well as free 1 on 1 project consulting.
Thanks for watching, and I'll see you next time.

Speaker 0: In this episode, we're going to talk about NgModule and how to properly use it to organize an Angular application. So what's the purpose of an NgModule in the first place? The answer is it helps organize the complex relationship between views such as components and directives to data providers such as services and guards. It works by allowing you to define all these relationships in a single file as opposed to doing it individually in every Component service as was the case in early days of Angular 2. Now let's look inside an NG module and see what these metadata terms actually mean.

First, we have declarations, which is where you would put any component, directive, or pipe, and then it'll be privately available to that module. If you want it to be publicly available to other modules, then you'll need to add it to the export section. This concept is similar to public and private functions in object Oriented programming. Components will be private by default and become public if you add them to exports. Other modules gain access to exported components by importing that module in their own metadata.

So just to recap, declarations, imports, and exports define the relationship between components and how they're shared between different NG modules. Next, we have the bootstrap property, which defines a component that's used to initially load your application. By default, this will usually be the app component, which is created automatically by the Angular CLI. The final property you should be aware of is providers. This is where you register data providers such as services and guards that can be injected into Components within this module.

The injectable class will be available to any component in this module as well as any module that imports it. Now let's look at some practical ways we can use NgModule to organize an application. In this example, we have all of our components and services in the root app module that was created by default. As our app grows larger, this file is gonna be more and more Cluttered and more and more hard to maintain. Our goal is to refactor most of our components and services to their own modules with the exception of the app component, which we still wanna bootstrap from the root module.

Overall, this will keep the logic in our app much more organized. Now, let's take a look at the routing module that was created by default by the Angular CLI. A routing module should have no declarations. It may have providers in the form of guards, and it should always export the router module. We can add our contact list component to the router, And it will load that component imperatively when the route is activated, which in this case is just the root URL.

Depending on the complexity of your app, you may use multiple routing modules for better organization as well as lazy loading. Now let's build a feature module to organize everything related to contacts in our app. Feature modules will consist mostly of declarations and possibly a provider, but they should never export anything. Their primary purpose is to organize business logic related to a specific feature. We generate the module with the Angular CLI, then copy everything related to contacts over to it.

Notice we're also importing the common module. That gives us access to Angular's most common features such as n g f and n g 4. Now we can go back to the root and delete everything related to contacts, then import the contact module and add it to the imports in the root. If we had 20 different components related to contacts, you can see how this would greatly improve the clutter in this file. Now let's look at a shared module, also called widget modules.

They're almost identical to feature modules, except that they Add all of their declarations to the exports as well, so they can be distributed to other modules. Common use cases include social media icons, loading spinners, and other UI elements similar to those. Let's generate the module from the CLI then add the social icons component to both the declarations and the Or it's from there we can go ahead and import it in both the root module as well as the feature module we created in the previous step. Now, the social icons component will be available everywhere in the app. The last type we'll look at is a core or service module.

It has no declarations and only focuses on services for dependency injection. Common providers to include here would be an Auth service or a Toast message service, anything that provides data globally throughout the app. In this example, we're extracting our auth service into the core module. We generate it with the CLI then copy over the auth service to its new home. We can also remove the common module since we're only dealing with services here.

Back in the root, we can go ahead and Import the core module and add it to the imports with the others. If we look over our app module now, we can see it's a lot more organized. We just have the one declaration, No providers, the one bootstrap component, and just a handful of modules to manage. That covers the main patterns you'll see with ng module and Angular applications. In an upcoming video, I'll show you how to use the router along with NG modules to lazy load components.

That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at at angularfirebase.com. For just a few bucks a month, you'll get access to exclusive content as well as free 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
In this episode, we're going to talk about NgModule and how to properly use it to organize an Angular application. So what's the purpose of an NgModule in the first place?
The answer is it helps organize the complex relationship between views such as components and directives to data providers such as services and guards. It works by allowing you to define all these relationships in a single file as opposed to doing it individually in every Component service as was the case in early days of Angular 2.
data management
databases
Now let's look inside an NG module and see what these metadata terms actually mean. First, we have declarations, which is where you would put any component, directive, or pipe, and then it'll be privately available to that module.
If you want it to be publicly available to other modules, then you'll need to add it to the export section. This concept is similar to public and private functions in object Oriented programming. Components will be private by default and become public if you add them to exports. Other modules gain access to exported components by importing that module in their own metadata.
software development
So just to recap, declarations, imports, and exports define the relationship between components and how they're shared between different NG modules. Next, we have the bootstrap property, which defines a component that's used to initially load your application. By default, this will usually be the app component, which is created automatically by the Angular CLI. The final property you should be aware of is providers. This is where you register data providers such as services and guards that can be injected into Components within this module. The injectable class will be available to any component in this module as well as any module that imports it.
software development
software
infrastructure
Now let's look at some practical ways we can use NgModule to organize an application. In this example, we have all of our components and services in the root app module that was created by default.
As our app grows larger, this file is gonna be more and more Cluttered and more and more hard to maintain. Our goal is to refactor most of our components and services to their own modules with the exception of the app component, which we still wanna bootstrap from the root module.
software
software development
Overall, this will keep the logic in our app much more organized. Now, let's take a look at the routing module that was created by default by the Angular CLI. A routing module should have no declarations. It may have providers in the form of guards, and it should always export the router module. We can add our contact list component to the router, And it will load that component imperatively when the route is activated, which in this case is just the root URL. Depending on the complexity of your app, you may use multiple routing modules for better organization as well as lazy loading. Now let's build a feature module to organize everything related to contacts in our app. Feature modules will consist mostly of declarations and possibly a provider, but they should never export anything. Their primary purpose is to organize business logic related to a specific feature. We generate the module with the Angular CLI, then copy everything related to contacts over to it. Notice we're also importing the common module. That gives us access to Angular's most common features such as n g f and n g 4. Now we can go back to the root and delete everything related to contacts, then import the contact module and add it to the imports in the root. If we had 20 different components related to contacts, you can see how this would greatly improve the clutter in this file. Now let's look at a shared module, also called widget modules. They're almost identical to feature modules, except that they Add all of their declarations to the exports as well, so they can be distributed to other modules. Common use cases include social media icons, loading spinners, and other UI elements similar to those. Let's generate the module from the CLI then add the social icons component to both the declarations and the Or it's from there we can go ahead and import it in both the root module as well as the feature module we created in the previous step.
Now, the social icons component will be available everywhere in the app. The last type we'll look at is a core or service module. It has no declarations and only focuses on services for dependency injection. Common providers to include here would be an Auth service or a Toast message service, anything that provides data globally throughout the app.
systems
In this example, we're extracting our auth service into the core module. We generate it with the CLI then copy over the auth service to its new home. We can also remove the common module since we're only dealing with services here.
Back in the root, we can go ahead and Import the core module and add it to the imports with the others. If we look over our app module now, we can see it's a lot more organized. We just have the one declaration, No providers, the one bootstrap component, and just a handful of modules to manage.
software
infrastructure
software development
That covers the main patterns you'll see with ng module and Angular applications. In an upcoming video, I'll show you how to use the router along with NG modules to lazy load components. That's it for this episode.
If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at at angularfirebase.com. For just a few bucks a month, you'll get access to exclusive content as well as free 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
youtube
streaming
customer support
podcasts
radio
In this episode, we're going to talk about NgModule and how to properly use it to organize an Angular application. So what's the purpose of an NgModule in the first place? The answer is it helps organize the complex relationship between views such as components and directives to data providers such as services and guards. It works by allowing you to define all these relationships in a single file as opposed to doing it individually in every Component service as was the case in early days of Angular 2. Now let's look inside an NG module and see what these metadata terms actually mean. First, we have declarations, which is where you would put any component, directive, or pipe, and then it'll be privately available to that module. If you want it to be publicly available to other modules, then you'll need to add it to the export section. This concept is similar to public and private functions in object Oriented programming. Components will be private by default and become public if you add them to exports. Other modules gain access to exported components by importing that module in their own metadata. So just to recap, declarations, imports, and exports define the relationship between components and how they're shared between different NG modules. Next, we have the bootstrap property, which defines a component that's used to initially load your application. By default, this will usually be the app component, which is created automatically by the Angular CLI. The final property you should be aware of is providers. This is where you register data providers such as services and guards that can be injected into Components within this module. The injectable class will be available to any component in this module as well as any module that imports it. Now let's look at some practical ways we can use NgModule to organize an application. In this example, we have all of our components and services in the root app module that was created by default. As our app grows larger, this file is gonna be more and more Cluttered and more and more hard to maintain. Our goal is to refactor most of our components and services to their own modules with the exception of the app component, which we still wanna bootstrap from the root module. Overall, this will keep the logic in our app much more organized. Now, let's take a look at the routing module that was created by default by the Angular CLI. A routing module should have no declarations. It may have providers in the form of guards, and it should always export the router module. We can add our contact list component to the router, And it will load that component imperatively when the route is activated, which in this case is just the root URL. Depending on the complexity of your app, you may use multiple routing modules for better organization as well as lazy loading. Now let's build a feature module to organize everything related to contacts in our app. Feature modules will consist mostly of declarations and possibly a provider, but they should never export anything. Their primary purpose is to organize business logic related to a specific feature. We generate the module with the Angular CLI, then copy everything related to contacts over to it. Notice we're also importing the common module. That gives us access to Angular's most common features such as n g f and n g 4. Now we can go back to the root and delete everything related to contacts, then import the contact module and add it to the imports in the root. If we had 20 different components related to contacts, you can see how this would greatly improve the clutter in this file. Now let's look at a shared module, also called widget modules. They're almost identical to feature modules, except that they Add all of their declarations to the exports as well, so they can be distributed to other modules. Common use cases include social media icons, loading spinners, and other UI elements similar to those. Let's generate the module from the CLI then add the social icons component to both the declarations and the Or it's from there we can go ahead and import it in both the root module as well as the feature module we created in the previous step. Now, the social icons component will be available everywhere in the app. The last type we'll look at is a core or service module. It has no declarations and only focuses on services for dependency injection. Common providers to include here would be an Auth service or a Toast message service, anything that provides data globally throughout the app. In this example, we're extracting our auth service into the core module. We generate it with the CLI then copy over the auth service to its new home. We can also remove the common module since we're only dealing with services here. Back in the root, we can go ahead and Import the core module and add it to the imports with the others. If we look over our app module now, we can see it's a lot more organized. We just have the one declaration, No providers, the one bootstrap component, and just a handful of modules to manage. That covers the main patterns you'll see with ng module and Angular applications. In an upcoming video, I'll show you how to use the router along with NG modules to lazy load components. That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at at angularfirebase.com. For just a few bucks a month, you'll get access to exclusive content as well as free 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
talk
talk
about
about
NgModule
ngmodule
and
and
how
how
to
to
properly
properly
use
use
it
it
to
to
organize
organize
an
an
Angular
angular
application.
application
So
so
what's
what's
the
the
purpose
purpose
of
of
an
an
NgModule
ngmodule
in
in
the
the
first
first
place?
place
The
the
answer
answer
is
is
it
it
helps
helps
organize
organize
the
the
complex
complex
relationship
relationship
between
between
views
views
such
such
as
as
components
components
and
and
directives
directives
to
to
data
data
providers
providers
such
such
as
as
services
services
and
and
guards.
guards
It
it
works
works
by
by
allowing
allowing
you
you
to
to
define
define
all
all
these
these
relationships
relationships
in
in
a
a
single
single
file
file
as
as
opposed
opposed
to
to
doing
doing
it
it
individually
individually
in
in
every
every
Component
component
service
service
as
as
was
was
the
the
case
case
in
in
early
early
days
days
of
of
Angular
angular
2.
2
Now
now
let's
let's
look
look
inside
inside
an
an
NG
ng
module
module
and
and
see
see
what
what
these
these
metadata
metadata
terms
terms
actually
actually
mean.
mean
First,
first
we
we
have
have
declarations,
declarations
which
which
is
is
where
where
you
you
would
would
put
put
any
any
component,
component
directive,
directive
or
or
pipe,
pipe
and
and
then
then
it'll
it'll
be
be
privately
privately
available
available
to
to
that
that
module.
module
If
if
you
you
want
want
it
it
to
to
be
be
publicly
publicly
available
available
to
to
other
other
modules,
modules
then
then
you'll
you'll
need
need
to
to
add
add
it
it
to
to
the
the
export
export
section.
section
This
this
concept
concept
is
is
similar
similar
to
to
public
public
and
and
private
private
functions
functions
in
in
object
object
Oriented
oriented
programming.
programming
Components
components
will
will
be
be
private
private
by
by
default
default
and
and
become
become
public
public
if
if
you
you
add
add
them
them
to
to
exports.
exports
Other
other
modules
modules
gain
gain
access
access
to
to
exported
exported
components
components
by
by
importing
importing
that
that
module
module
in
in
their
their
own
own
metadata.
metadata
So
so
just
just
to
to
recap,
recap
declarations,
declarations
imports,
imports
and
and
exports
exports
define
define
the
the
relationship
relationship
between
between
components
components
and
and
how
how
they're
they're
shared
shared
between
between
different
different
NG
ng
modules.
modules
Next,
next
we
we
have
have
the
the
bootstrap
bootstrap
property,
property
which
which
defines
defines
a
a
component
component
that's
that's
used
used
to
to
initially
initially
load
load
your
your
application.
application
By
by
default,
default
this
this
will
will
usually
usually
be
be
the
the
app
app
component,
component
which
which
is
is
created
created
automatically
automatically
by
by
the
the
Angular
angular
CLI.
cli
The
the
final
final
property
property
you
you
should
should
be
be
aware
aware
of
of
is
is
providers.
providers
This
this
is
is
where
where
you
you
register
register
data
data
providers
providers
such
such
as
as
services
services
and
and
guards
guards
that
that
can
can
be
be
injected
injected
into
into
Components
components
within
within
this
this
module.
module
The
the
injectable
injectable
class
class
will
will
be
be
available
available
to
to
any
any
component
component
in
in
this
this
module
module
as
as
well
well
as
as
any
any
module
module
that
that
imports
imports
it.
it
Now
now
let's
let's
look
look
at
at
some
some
practical
practical
ways
ways
we
we
can
can
use
use
NgModule
ngmodule
to
to
organize
organize
an
an
application.
application
In
in
this
this
example,
example
we
we
have
have
all
all
of
of
our
our
components
components
and
and
services
services
in
in
the
the
root
root
app
app
module
module
that
that
was
was
created
created
by
by
default.
default
As
as
our
our
app
app
grows
grows
larger,
larger
this
this
file
file
is
is
gonna
gonna
be
be
more
more
and
and
more
more
Cluttered
cluttered
and
and
more
more
and
and
more
more
hard
hard
to
to
maintain.
maintain
Our
our
goal
goal
is
is
to
to
refactor
refactor
most
most
of
of
our
our
components
components
and
and
services
services
to
to
their
their
own
own
modules
modules
with
with
the
the
exception
exception
of
of
the
the
app
app
component,
component
which
which
we
we
still
still
wanna
wanna
bootstrap
bootstrap
from
from
the
the
root
root
module.
module
Overall,
overall
this
this
will
will
keep
keep
the
the
logic
logic
in
in
our
our
app
app
much
much
more
more
organized.
organized
Now,
now
let's
let's
take
take
a
a
look
look
at
at
the
the
routing
routing
module
module
that
that
was
was
created
created
by
by
default
default
by
by
the
the
Angular
angular
CLI.
cli
A
a
routing
routing
module
module
should
should
have
have
no
no
declarations.
declarations
It
it
may
may
have
have
providers
providers
in
in
the
the
form
form
of
of
guards,
guards
and
and
it
it
should
should
always
always
export
export
the
the
router
router
module.
module
We
we
can
can
add
add
our
our
contact
contact
list
list
component
component
to
to
the
the
router,
router
And
and
it
it
will
will
load
load
that
that
component
component
imperatively
imperatively
when
when
the
the
route
route
is
is
activated,
activated
which
which
in
in
this
this
case
case
is
is
just
just
the
the
root
root
URL.
url
Depending
depending
on
on
the
the
complexity
complexity
of
of
your
your
app,
app
you
you
may
may
use
use
multiple
multiple
routing
routing
modules
modules
for
for
better
better
organization
organization
as
as
well
well
as
as
lazy
lazy
loading.
loading
Now
now
let's
let's
build
build
a
a
feature
feature
module
module
to
to
organize
organize
everything
everything
related
related
to
to
contacts
contacts
in
in
our
our
app.
app
Feature
feature
modules
modules
will
will
consist
consist
mostly
mostly
of
of
declarations
declarations
and
and
possibly
possibly
a
a
provider,
provider
but
but
they
they
should
should
never
never
export
export
anything.
anything
Their
their
primary
primary
purpose
purpose
is
is
to
to
organize
organize
business
business
logic
logic
related
related
to
to
a
a
specific
specific
feature.
feature
We
we
generate
generate
the
the
module
module
with
with
the
the
Angular
angular
CLI,
cli
then
then
copy
copy
everything
everything
related
related
to
to
contacts
contacts
over
over
to
to
it.
it
Notice
notice
we're
we're
also
also
importing
importing
the
the
common
common
module.
module
That
that
gives
gives
us
us
access
access
to
to
Angular's
angular's
most
most
common
common
features
features
such
such
as
as
n
n
g
g
f
f
and
and
n
n
g
g
4.
4
Now
now
we
we
can
can
go
go
back
back
to
to
the
the
root
root
and
and
delete
delete
everything
everything
related
related
to
to
contacts,
contacts
then
then
import
import
the
the
contact
contact
module
module
and
and
add
add
it
it
to
to
the
the
imports
imports
in
in
the
the
root.
root
If
if
we
we
had
had
20
20
different
different
components
components
related
related
to
to
contacts,
contacts
you
you
can
can
see
see
how
how
this
this
would
would
greatly
greatly
improve
improve
the
the
clutter
clutter
in
in
this
this
file.
file
Now
now
let's
let's
look
look
at
at
a
a
shared
shared
module,
module
also
also
called
called
widget
widget
modules.
modules
They're
they're
almost
almost
identical
identical
to
to
feature
feature
modules,
modules
except
except
that
that
they
they
Add
add
all
all
of
of
their
their
declarations
declarations
to
to
the
the
exports
exports
as
as
well,
well
so
so
they
they
can
can
be
be
distributed
distributed
to
to
other
other
modules.
modules
Common
common
use
use
cases
cases
include
include
social
social
media
media
icons,
icons
loading
loading
spinners,
spinners
and
and
other
other
UI
ui
elements
elements
similar
similar
to
to
those.
those
Let's
let's
generate
generate
the
the
module
module
from
from
the
the
CLI
cli
then
then
add
add
the
the
social
social
icons
icons
component
component
to
to
both
both
the
the
declarations
declarations
and
and
the
the
Or
or
it's
it's
from
from
there
there
we
we
can
can
go
go
ahead
ahead
and
and
import
import
it
it
in
in
both
both
the
the
root
root
module
module
as
as
well
well
as
as
the
the
feature
feature
module
module
we
we
created
created
in
in
the
the
previous
previous
step.
step
Now,
now
the
the
social
social
icons
icons
component
component
will
will
be
be
available
available
everywhere
everywhere
in
in
the
the
app.
app
The
the
last
last
type
type
we'll
we'll
look
look
at
at
is
is
a
a
core
core
or
or
service
service
module.
module
It
it
has
has
no
no
declarations
declarations
and
and
only
only
focuses
focuses
on
on
services
services
for
for
dependency
dependency
injection.
injection
Common
common
providers
providers
to
to
include
include
here
here
would
would
be
be
an
an
Auth
auth
service
service
or
or
a
a
Toast
toast
message
message
service,
service
anything
anything
that
that
provides
provides
data
data
globally
globally
throughout
throughout
the
the
app.
app
In
in
this
this
example,
example
we're
we're
extracting
extracting
our
our
auth
auth
service
service
into
into
the
the
core
core
module.
module
We
we
generate
generate
it
it
with
with
the
the
CLI
cli
then
then
copy
copy
over
over
the
the
auth
auth
service
service
to
to
its
its
new
new
home.
home
We
we
can
can
also
also
remove
remove
the
the
common
common
module
module
since
since
we're
we're
only
only
dealing
dealing
with
with
services
services
here.
here
Back
back
in
in
the
the
root,
root
we
we
can
can
go
go
ahead
ahead
and
and
Import
import
the
the
core
core
module
module
and
and
add
add
it
it
to
to
the
the
imports
imports
with
with
the
the
others.
others
If
if
we
we
look
look
over
over
our
our
app
app
module
module
now,
now
we
we
can
can
see
see
it's
it's
a
a
lot
lot
more
more
organized.
organized
We
we
just
just
have
have
the
the
one
one
declaration,
declaration
No
no
providers,
providers
the
the
one
one
bootstrap
bootstrap
component,
component
and
and
just
just
a
a
handful
handful
of
of
modules
modules
to
to
manage.
manage
That
that
covers
covers
the
the
main
main
patterns
patterns
you'll
you'll
see
see
with
with
ng
ng
module
module
and
and
Angular
angular
applications.
applications
In
in
an
an
upcoming
upcoming
video,
video
I'll
i'll
show
show
you
you
how
how
to
to
use
use
the
the
router
router
along
along
with
with
NG
ng
modules
modules
to
to
lazy
lazy
load
load
components.
components
That's
that's
it
it
for
for
this
this
episode.
episode
If
if
you
you
found
found
the
the
video
video
helpful,
helpful
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
consider
consider
becoming
becoming
a
a
pro
pro
subscriber
subscriber
at
at
at
at
angularfirebase.com.
angularfirebase.com
For
for
just
just
a
a
few
few
bucks
bucks
a
a
month,
month
you'll
you'll
get
get
access
access
to
to
exclusive
exclusive
content
content
as
as
well
well
as
as
free
free
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
In this video, the speaker explains how to properly use NgGeneration in an Angular application by defining relationships between views and components. They also discuss routing and a feature module, including the use of a core or service module, which is designed to organize everything related to contacts. The speaker concludes by highlighting how to use the router and NG modules to lazy load components and promotes a free one-on-one project consulting.
Learn NgModule in Angular with Examples
In this episode, we're going to talk about NgModule and how to properly use it to organize an Angular application. So what's the purpose of an NgModule in the first place? The answer is it helps organize the complex relationship between views such as components and directives to data providers such as services and guards. It works by allowing you to define all these relationships in a single file as opposed to doing it individually in every Component service as was the case in early days of Angular 2. Now let's look inside an NG module and see what these metadata terms actually mean. First, we have declarations, which is where you would put any component, directive, or pipe, and then it'll be privately available to that module. If you want it to be publicly available to other modules, then you'll need to add it to the export section. This concept is similar to public and private functions in object Oriented programming. Components will be private by default and become public if you add them to exports. Other modules gain access to exported components by importing that module in their own metadata. So just to recap, declarations, imports, and exports define the relationship between components and how they're shared between different NG modules. Next, we have the bootstrap property, which defines a component that's used to initially load your application. By default, this will usually be the app component, which is created automatically by the Angular CLI. The final property you should be aware of is providers. This is where you register data providers such as services and guards that can be injected into Components within this module. The injectable class will be available to any component in this module as well as any module that imports it. Now let's look at some practical ways we can use NgModule to organize an application. In this example, we have all of our components and services in the root app module that was created by default. As our app grows larger, this file is gonna be more and more Cluttered and more and more hard to maintain. Our goal is to refactor most of our components and services to their own modules with the exception of the app component, which we still wanna bootstrap from the root module. Overall, this will keep the logic in our app much more organized. Now, let's take a look at the routing module that was created by default by the Angular CLI. A routing module should have no declarations. It may have providers in the form of guards, and it should always export the router module. We can add our contact list component to the router, And it will load that component imperatively when the route is activated, which in this case is just the root URL. Depending on the complexity of your app, you may use multiple routing modules for better organization as well as lazy loading. Now let's build a feature module to organize everything related to contacts in our app. Feature modules will consist mostly of declarations and possibly a provider, but they should never export anything. Their primary purpose is to organize business logic related to a specific feature. We generate the module with the Angular CLI, then copy everything related to contacts over to it. Notice we're also importing the common module. That gives us access to Angular's most common features such as n g f and n g 4. Now we can go back to the root and delete everything related to contacts, then import the contact module and add it to the imports in the root. If we had 20 different components related to contacts, you can see how this would greatly improve the clutter in this file. Now let's look at a shared module, also called widget modules. They're almost identical to feature modules, except that they Add all of their declarations to the exports as well, so they can be distributed to other modules. Common use cases include social media icons, loading spinners, and other UI elements similar to those. Let's generate the module from the CLI then add the social icons component to both the declarations and the Or it's from there we can go ahead and import it in both the root module as well as the feature module we created in the previous step. Now, the social icons component will be available everywhere in the app. The last type we'll look at is a core or service module. It has no declarations and only focuses on services for dependency injection. Common providers to include here would be an Auth service or a Toast message service, anything that provides data globally throughout the app. In this example, we're extracting our auth service into the core module. We generate it with the CLI then copy over the auth service to its new home. We can also remove the common module since we're only dealing with services here. Back in the root, we can go ahead and Import the core module and add it to the imports with the others. If we look over our app module now, we can see it's a lot more organized. We just have the one declaration, No providers, the one bootstrap component, and just a handful of modules to manage. That covers the main patterns you'll see with ng module and Angular applications. In an upcoming video, I'll show you how to use the router along with NG modules to lazy load components. That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at at angularfirebase.com. For just a few bucks a month, you'll get access to exclusive content as well as free 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
In this video, the speaker explains how to properly use NgGeneration in an Angular application by defining relationships between views and components. They also discuss routing and a feature module, including the use of a core or service module, which is designed to organize everything related to contacts. The speaker concludes by highlighting how to use the router and NG modules to lazy load components and promotes a free one-on-one project consulting.