Full Lesson https://angularfirebase.com/lessons/how-to-lazy-load-components-in-angular-4-in-three-steps/

Learn how to load components asynchronously with Angular Lazy Loading.

Get the source code on github https://github.com/codediodeio/lazy-loading-angular
2024-02-04T08:25:52.326Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
c7b5c04f-5b48-4cc5-9eda-b93a23e58efd
dc4504be75b4f08c96f7311ce7f6c66385322950d4ae9875ec62686ea22e2b16
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, we're going to implement lazy loading with Angular 4.
Lazy loading is a technique that allows you to render components asynchronously when a certain route is activated.
This can help with the initial loading performance of an Angular app.
Let's get started by building a new app from scratch with the Angular CLI.
Make sure to pass the routing flags so Angular builds a default router for us.
Let's start in the app component HTML and just set a router link going to the lazy loaded component, which in this case will be activated on lazy slash load me.
The next step is to build the lazy loaded module as well as its components.
When building the lazy module, we wanna pass the flat flag to keep it in the root directory.
And for each component, we can pass the module flag followed by lazy.
That will automatically assign these components to the lazy module.
Inside the module itself, we're going to import the root module, then define an array of routes.
In this case, we just have one route that points to load me that imperatively loads the lazy parent component.
When importing the router module, we use the for child function and we pass it the routes array that we just create.
There's nothing special about the parent component.
It's all boilerplate code and it just loops over the child component.
The final step is to point the app router to this new module.
Cert in the route definitions, we create a new route whose path is lazy, then use the load children property to point to that module.
So we point to the file path for the module and then use a hash followed by the actual class of the module itself.
The end result is the lazy module is only loaded when this route is activated.
Let's make sure it's working in the browser.
Open Chrome developer tools and then go to the network tab.
When we activate the route, we should see the components rendered as well as a chunk dot JS file rendered in the network tab.
If we take a closer look, we can see it's just a bunch of webpack JavaScript code telling Angular how to load these components.
Cert 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 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 implement lazy loading with Angular 4. Lazy loading is a technique that allows you to render components asynchronously when a certain route is activated. This can help with the initial loading performance of an Angular app. Let's get started by building a new app from scratch with the Angular CLI. Make sure to pass the routing flags so Angular builds a default router for us.

Let's start in the app component HTML and just set a router link going to the lazy loaded component, which in this case will be activated on lazy slash load me. The next step is to build the lazy loaded module as well as its components. When building the lazy module, we wanna pass the flat flag to keep it in the root directory. And for each component, we can pass the module flag followed by lazy. That will automatically assign these components to the lazy module.

Inside the module itself, we're going to import the root module, then define an array of routes. In this case, we just have one route that points to load me that imperatively loads the lazy parent component. When importing the router module, we use the for child function and we pass it the routes array that we just create. There's nothing special about the parent component. It's all boilerplate code and it just loops over the child component.

The final step is to point the app router to this new module. Cert in the route definitions, we create a new route whose path is lazy, then use the load children property to point to that module. So we point to the file path for the module and then use a hash followed by the actual class of the module itself. The end result is the lazy module is only loaded when this route is activated. Let's make sure it's working in the browser.

Open Chrome developer tools and then go to the network tab. When we activate the route, we should see the components rendered as well as a chunk dot JS file rendered in the network tab. If we take a closer look, we can see it's just a bunch of webpack JavaScript code telling Angular how to load these components. Cert 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 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 implement lazy loading with Angular 4. Lazy loading is a technique that allows you to render components asynchronously when a certain route is activated. This can help with the initial loading performance of an Angular app. Let's get started by building a new app from scratch with the Angular CLI. Make sure to pass the routing flags so Angular builds a default router for us. Let's start in the app component HTML and just set a router link going to the lazy loaded component, which in this case will be activated on lazy slash load me. The next step is to build the lazy loaded module as well as its components. When building the lazy module, we wanna pass the flat flag to keep it in the root directory. And for each component, we can pass the module flag followed by lazy. That will automatically assign these components to the lazy module. Inside the module itself, we're going to import the root module, then define an array of routes.
In this case, we just have one route that points to load me that imperatively loads the lazy parent component. When importing the router module, we use the for child function and we pass it the routes array that we just create. There's nothing special about the parent component. It's all boilerplate code and it just loops over the child component.
parenting
The final step is to point the app router to this new module. Cert in the route definitions, we create a new route whose path is lazy, then use the load children property to point to that module. So we point to the file path for the module and then use a hash followed by the actual class of the module itself. The end result is the lazy module is only loaded when this route is activated. Let's make sure it's working in the browser. Open Chrome developer tools and then go to the network tab. When we activate the route, we should see the components rendered as well as a chunk dot JS file rendered in the network tab. If we take a closer look, we can see it's just a bunch of webpack JavaScript code telling Angular how to load these components. Cert 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 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
In this episode, we're going to implement lazy loading with Angular 4. Lazy loading is a technique that allows you to render components asynchronously when a certain route is activated. This can help with the initial loading performance of an Angular app. Let's get started by building a new app from scratch with the Angular CLI. Make sure to pass the routing flags so Angular builds a default router for us. Let's start in the app component HTML and just set a router link going to the lazy loaded component, which in this case will be activated on lazy slash load me. The next step is to build the lazy loaded module as well as its components. When building the lazy module, we wanna pass the flat flag to keep it in the root directory. And for each component, we can pass the module flag followed by lazy. That will automatically assign these components to the lazy module. Inside the module itself, we're going to import the root module, then define an array of routes. In this case, we just have one route that points to load me that imperatively loads the lazy parent component. When importing the router module, we use the for child function and we pass it the routes array that we just create. There's nothing special about the parent component. It's all boilerplate code and it just loops over the child component. The final step is to point the app router to this new module. Cert in the route definitions, we create a new route whose path is lazy, then use the load children property to point to that module. So we point to the file path for the module and then use a hash followed by the actual class of the module itself. The end result is the lazy module is only loaded when this route is activated. Let's make sure it's working in the browser. Open Chrome developer tools and then go to the network tab. When we activate the route, we should see the components rendered as well as a chunk dot JS file rendered in the network tab. If we take a closer look, we can see it's just a bunch of webpack JavaScript code telling Angular how to load these components. Cert 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 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
implement
implement
lazy
lazy
loading
loading
with
with
Angular
angular
4.
4
Lazy
lazy
loading
loading
is
is
a
a
technique
technique
that
that
allows
allows
you
you
to
to
render
render
components
components
asynchronously
asynchronously
when
when
a
a
certain
certain
route
route
is
is
activated.
activated
This
this
can
can
help
help
with
with
the
the
initial
initial
loading
loading
performance
performance
of
of
an
an
Angular
angular
app.
app
Let's
let's
get
get
started
started
by
by
building
building
a
a
new
new
app
app
from
from
scratch
scratch
with
with
the
the
Angular
angular
CLI.
cli
Make
make
sure
sure
to
to
pass
pass
the
the
routing
routing
flags
flags
so
so
Angular
angular
builds
builds
a
a
default
default
router
router
for
for
us.
us
Let's
let's
start
start
in
in
the
the
app
app
component
component
HTML
html
and
and
just
just
set
set
a
a
router
router
link
link
going
going
to
to
the
the
lazy
lazy
loaded
loaded
component,
component
which
which
in
in
this
this
case
case
will
will
be
be
activated
activated
on
on
lazy
lazy
slash
slash
load
load
me.
me
The
the
next
next
step
step
is
is
to
to
build
build
the
the
lazy
lazy
loaded
loaded
module
module
as
as
well
well
as
as
its
its
components.
components
When
when
building
building
the
the
lazy
lazy
module,
module
we
we
wanna
wanna
pass
pass
the
the
flat
flat
flag
flag
to
to
keep
keep
it
it
in
in
the
the
root
root
directory.
directory
And
and
for
for
each
each
component,
component
we
we
can
can
pass
pass
the
the
module
module
flag
flag
followed
followed
by
by
lazy.
lazy
That
that
will
will
automatically
automatically
assign
assign
these
these
components
components
to
to
the
the
lazy
lazy
module.
module
Inside
inside
the
the
module
module
itself,
itself
we're
we're
going
going
to
to
import
import
the
the
root
root
module,
module
then
then
define
define
an
an
array
array
of
of
routes.
routes
In
in
this
this
case,
case
we
we
just
just
have
have
one
one
route
route
that
that
points
points
to
to
load
load
me
me
that
that
imperatively
imperatively
loads
loads
the
the
lazy
lazy
parent
parent
component.
component
When
when
importing
importing
the
the
router
router
module,
module
we
we
use
use
the
the
for
for
child
child
function
function
and
and
we
we
pass
pass
it
it
the
the
routes
routes
array
array
that
that
we
we
just
just
create.
create
There's
there's
nothing
nothing
special
special
about
about
the
the
parent
parent
component.
component
It's
it's
all
all
boilerplate
boilerplate
code
code
and
and
it
it
just
just
loops
loops
over
over
the
the
child
child
component.
component
The
the
final
final
step
step
is
is
to
to
point
point
the
the
app
app
router
router
to
to
this
this
new
new
module.
module
Cert
cert
in
in
the
the
route
route
definitions,
definitions
we
we
create
create
a
a
new
new
route
route
whose
whose
path
path
is
is
lazy,
lazy
then
then
use
use
the
the
load
load
children
children
property
property
to
to
point
point
to
to
that
that
module.
module
So
so
we
we
point
point
to
to
the
the
file
file
path
path
for
for
the
the
module
module
and
and
then
then
use
use
a
a
hash
hash
followed
followed
by
by
the
the
actual
actual
class
class
of
of
the
the
module
module
itself.
itself
The
the
end
end
result
result
is
is
the
the
lazy
lazy
module
module
is
is
only
only
loaded
loaded
when
when
this
this
route
route
is
is
activated.
activated
Let's
let's
make
make
sure
sure
it's
it's
working
working
in
in
the
the
browser.
browser
Open
open
Chrome
chrome
developer
developer
tools
tools
and
and
then
then
go
go
to
to
the
the
network
network
tab.
tab
When
when
we
we
activate
activate
the
the
route,
route
we
we
should
should
see
see
the
the
components
components
rendered
rendered
as
as
well
well
as
as
a
a
chunk
chunk
dot
dot
JS
js
file
file
rendered
rendered
in
in
the
the
network
network
tab.
tab
If
if
we
we
take
take
a
a
closer
closer
look,
look
we
we
can
can
see
see
it's
it's
just
just
a
a
bunch
bunch
of
of
webpack
webpack
JavaScript
javascript
code
code
telling
telling
Angular
angular
how
how
to
to
load
load
these
these
components.
components
Cert
cert
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
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
The speaker explains the concept of lazy loading in Angular 4, which allows for rendering components asynchronously when a certain route is activated. They then proceed to build a new app, import the root module, and define routes for each component. The final step is to import the new module and use the for child function to assign routes to the lazy load me module.
Lazy Loading Components in Angular 4
In this episode, we're going to implement lazy loading with Angular 4. Lazy loading is a technique that allows you to render components asynchronously when a certain route is activated. This can help with the initial loading performance of an Angular app. Let's get started by building a new app from scratch with the Angular CLI. Make sure to pass the routing flags so Angular builds a default router for us. Let's start in the app component HTML and just set a router link going to the lazy loaded component, which in this case will be activated on lazy slash load me. The next step is to build the lazy loaded module as well as its components. When building the lazy module, we wanna pass the flat flag to keep it in the root directory. And for each component, we can pass the module flag followed by lazy. That will automatically assign these components to the lazy module. Inside the module itself, we're going to import the root module, then define an array of routes. In this case, we just have one route that points to load me that imperatively loads the lazy parent component. When importing the router module, we use the for child function and we pass it the routes array that we just create. There's nothing special about the parent component. It's all boilerplate code and it just loops over the child component. The final step is to point the app router to this new module. Cert in the route definitions, we create a new route whose path is lazy, then use the load children property to point to that module. So we point to the file path for the module and then use a hash followed by the actual class of the module itself. The end result is the lazy module is only loaded when this route is activated. Let's make sure it's working in the browser. Open Chrome developer tools and then go to the network tab. When we activate the route, we should see the components rendered as well as a chunk dot JS file rendered in the network tab. If we take a closer look, we can see it's just a bunch of webpack JavaScript code telling Angular how to load these components. Cert 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 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.
The speaker explains the concept of lazy loading in Angular 4, which allows for rendering components asynchronously when a certain route is activated. They then proceed to build a new app, import the root module, and define routes for each component. The final step is to import the new module and use the for child function to assign routes to the lazy load me module.