148. Outsourcing the Route Configuration

Jul 15, 2026 05:38 · 4:40 · English · Whisper Turbo · 2 Ke Keiki

E pau kēia hoʻoili i kēia lā. Hoʻonui no ka mālama mau →

Ka Papa Hana

0:02

S… Speaker 2 (148. Outsourcing the Route Configuration)

So,

0:03

S… Speaker 2 (148. Outsourcing the Route Configuration)

a lot was covered.

0:05

S… Speaker 1 (148. Outsourcing the Route Configuration)

Let's dive even deeper.

0:06

S… Speaker 2 (148. Outsourcing the Route Configuration)

If we have a look at our application,

0:09

S… Speaker 1 (148. Outsourcing the Route Configuration)

our app module,

0:10

S… Speaker 1 (148. Outsourcing the Route Configuration)

you already see that the routing takes up some

0:14

S… Speaker 1 (148. Outsourcing the Route Configuration)

significant space in our app module.

0:16

S… Speaker 2 (148. Outsourcing the Route Configuration)

So typically,

0:18

S… Speaker 2 (148. Outsourcing the Route Configuration)

if you have more than,

0:20

S… Speaker 2 (148. Outsourcing the Route Configuration)

let's say, two or three routes,

0:21

S… Speaker 1 (148. Outsourcing the Route Configuration)

you don't add it directly in the app module.

0:25

S… Speaker 1 (148. Outsourcing the Route Configuration)

Instead,

0:26

S… Speaker 1 (148. Outsourcing the Route Configuration)

you add a new file,

0:27

S… Speaker 1 (148. Outsourcing the Route Configuration)

which is for the application as a whole.

0:31

S… Speaker 1 (148. Outsourcing the Route Configuration)

typically is called app routing module.

0:34

S… Speaker 1 (148. Outsourcing the Route Configuration)

So the app -routing .module .cs file now

0:39

S… Speaker 1 (148. Outsourcing the Route Configuration)

will hold a second module.

0:41

S… Speaker 1 (148. Outsourcing the Route Configuration)

And I will have a whole module course section about

0:45

S… Speaker 1 (148. Outsourcing the Route Configuration)

Angular modules later in the course.

0:47

S… Speaker 1 (148. Outsourcing the Route Configuration)

There we will dive much deeper and learn how you can define

0:52

S… Speaker 1 (148. Outsourcing the Route Configuration)

and use multiple modules,

0:53

S… Speaker 1 (148. Outsourcing the Route Configuration)

use them together.

0:54

S… Speaker 1 (148. Outsourcing the Route Configuration)

This is a super easy use case here.

0:57

S… Speaker 1 (148. Outsourcing the Route Configuration)

So let's add it now.

0:58

S… Speaker 2 (148. Outsourcing the Route Configuration)

Here.

0:59

S… Speaker 1 (148. Outsourcing the Route Configuration)

will give this a name of app routing module because that is what

1:03

S… Speaker 1 (148. Outsourcing the Route Configuration)

it is and it receives this at ng module decorator

1:08

S… Speaker 1 (148. Outsourcing the Route Configuration)

So this is configured with a JavaScript object being passed to it.

1:12

S… Speaker 1 (148. Outsourcing the Route Configuration)

And this will be a super simple module.

1:14

S… Speaker 1 (148. Outsourcing the Route Configuration)

Now,

1:15

S… Speaker 1 (148. Outsourcing the Route Configuration)

as mentioned,

1:16

S… Speaker 1 (148. Outsourcing the Route Configuration)

I will dive deeper into this later.

1:18

S… Speaker 1 (148. Outsourcing the Route Configuration)

You can basically build your Angular app from multiple modules.

1:22

S… Speaker 1 (148. Outsourcing the Route Configuration)

This simple module here will handle all our routing

1:26

S… Speaker 2 (148. Outsourcing the Route Configuration)

-related tasks.

1:27

S… Speaker 1 (148. Outsourcing the Route Configuration)

So I will cut all my routes,

1:29

S… Speaker 1 (148. Outsourcing the Route Configuration)

this app routes constant,

1:31

S… Speaker 1 (148. Outsourcing the Route Configuration)

and add it in there.

1:33

S… Speaker 2 (148. Outsourcing the Route Configuration)

Of course,

1:34

S… Speaker 1 (148. Outsourcing the Route Configuration)

now...

1:35

S… Speaker 1 (148. Outsourcing the Route Configuration)

I need to make sure that all these imports here are added.

1:39

S… Speaker 1 (148. Outsourcing the Route Configuration)

So make sure to add all the imports to all these

1:44

S… Speaker 2 (148. Outsourcing the Route Configuration)

components.

1:44

S… Speaker 1 (148. Outsourcing the Route Configuration)

And also,

1:46

S… Speaker 2 (148. Outsourcing the Route Configuration)

of course,

1:46

S… Speaker 1 (148. Outsourcing the Route Configuration)

here to routes from the at Angular router

1:50

S… Speaker 2 (148. Outsourcing the Route Configuration)

package.

1:52

S… Speaker 1 (148. Outsourcing the Route Configuration)

And you don't need to add declarations here because these

1:56

S… Speaker 1 (148. Outsourcing the Route Configuration)

components already are declared in your app module.

2:00

S… Speaker 1 (148. Outsourcing the Route Configuration)

And we will soon add the app routing module to this root module.

2:04

S… Speaker 1 (148. Outsourcing the Route Configuration)

So no need to redeclare them.

2:06

S… Speaker 1 (148. Outsourcing the Route Configuration)

This would actually even give you an error.

2:08

S… Speaker 1 (148. Outsourcing the Route Configuration)

We also have to remove the router module from here,

2:12

S… Speaker 1 (148. Outsourcing the Route Configuration)

from our root module.

2:14

S… Speaker 2 (148. Outsourcing the Route Configuration)

Therefore,

2:15

S… Speaker 1 (148. Outsourcing the Route Configuration)

we can remove the imports from the router package.

2:19

S… Speaker 1 (148. Outsourcing the Route Configuration)

Make sure to import router module in your app routing module

2:24

S… Speaker 1 (148. Outsourcing the Route Configuration)

now.

2:24

S… Speaker 1 (148. Outsourcing the Route Configuration)

So to add this import here.

2:26

S… Speaker 1 (148. Outsourcing the Route Configuration)

And now we need to configure something in ng module.

2:30

S… Speaker 1 (148. Outsourcing the Route Configuration)

We basically want to add imports again.

2:34

S… Speaker 1 (148. Outsourcing the Route Configuration)

We had this in the app module too.

2:36

S… Speaker 1 (148. Outsourcing the Route Configuration)

And in imports,

2:37

S… Speaker 1 (148. Outsourcing the Route Configuration)

we want to use this router module,

2:39

S… Speaker 1 (148. Outsourcing the Route Configuration)

use for root as before and pass our routes array

2:44

S… Speaker 2 (148. Outsourcing the Route Configuration)

to it.

2:44

S… Speaker 2 (148. Outsourcing the Route Configuration)

So just like we did before.

2:46

S… Speaker 1 (148. Outsourcing the Route Configuration)

But that alone is not enough now.

2:49

S… Speaker 1 (148. Outsourcing the Route Configuration)

Because as I mentioned,

2:50

S… Speaker 1 (148. Outsourcing the Route Configuration)

we simply want to use this app routing module to outsource

2:54

S… Speaker 2 (148. Outsourcing the Route Configuration)

our routes.

2:55

S… Speaker 1 (148. Outsourcing the Route Configuration)

Therefore, we need to add our app routing module

2:59

S… Speaker 1 (148. Outsourcing the Route Configuration)

back to our main module.

3:01

S… Speaker 1 (148. Outsourcing the Route Configuration)

And for this,

3:02

S… Speaker 1 (148. Outsourcing the Route Configuration)

we need to add the exports array here.

3:05

S… Speaker 1 (148. Outsourcing the Route Configuration)

And I just can mention it again.

3:07

S… Speaker 1 (148. Outsourcing the Route Configuration)

We will dive deeper into modules later in the course.

3:09

S… Speaker 1 (148. Outsourcing the Route Configuration)

Exports simply tells Angular,

3:13

S… Speaker 1 (148. Outsourcing the Route Configuration)

hey, from this module,

3:15

S… Speaker 1 (148. Outsourcing the Route Configuration)

if I were to add this module to the imports

3:19

S… Speaker 1 (148. Outsourcing the Route Configuration)

of another module,

3:20

S… Speaker 2 (148. Outsourcing the Route Configuration)

what should be accessible?

3:23

S… Speaker 1 (148. Outsourcing the Route Configuration)

to this module which imports this module and the

3:28

S… Speaker 1 (148. Outsourcing the Route Configuration)

one thing we want to make accessible is our router module

3:32

S… Speaker 1 (148. Outsourcing the Route Configuration)

now here you don't call for root because you did this here so

3:36

S… Speaker 1 (148. Outsourcing the Route Configuration)

in the first step you configured this router module added your own routes

3:40

S… Speaker 1 (148. Outsourcing the Route Configuration)

to it now we simply export this configured router module

3:45

S… Speaker 1 (148. Outsourcing the Route Configuration)

and therefore in app module

3:47

S… Speaker 1 (148. Outsourcing the Route Configuration)

we can now import our own app routing module.

3:51

S… Speaker 1 (148. Outsourcing the Route Configuration)

So here on the imports array,

3:53

S… Speaker 1 (148. Outsourcing the Route Configuration)

we can simply add app routing module.

3:56

S… Speaker 1 (148. Outsourcing the Route Configuration)

Make sure to add the import path here.

3:58

S… Speaker 1 (148. Outsourcing the Route Configuration)

And with that,

4:00

S… Speaker 1 (148. Outsourcing the Route Configuration)

we have the same setup as before,

4:02

S… Speaker 1 (148. Outsourcing the Route Configuration)

but with a bit of a leaner app module and

4:06

S… Speaker 1 (148. Outsourcing the Route Configuration)

our routing functionality outsourced in this separate module,

4:10

S… Speaker 1 (148. Outsourcing the Route Configuration)

which is kind of a good practice to do to keep your files

4:14

S… Speaker 1 (148. Outsourcing the Route Configuration)

organized and easy to read.

4:16

S… Speaker 1 (148. Outsourcing the Route Configuration)

So same behavior as before if we save this with ng

4:21

S… Speaker 1 (148. Outsourcing the Route Configuration)

serve still running we should therefore see that everything still

4:25

S… Speaker 1 (148. Outsourcing the Route Configuration)

works and This looks good to me But again

4:29

S… Speaker 1 (148. Outsourcing the Route Configuration)

important to understand now with a different setup a bit more readable

4:33

S… Speaker 1 (148. Outsourcing the Route Configuration)

and a good practice to implement if your application grows more complex

I hana ʻia kēia transcript e AI (hoʻomaopopo leo mau). Hiki ke loaʻa nā hewa — e hōʻoia i ka leo mua no ka hoʻohana nui. Ka'ōlelo aʻo AI

❤️ Love STT.ai? E haʻi i kou mau hoaaloha!

Hōʻuluʻulu

Kaomi Summarize e hana i ka AI mahele o kēia transcript.

E nīnau i ka AI e pili ana i kēia transcript

E nīnau i kekahi mea e pili ana i kēia transcript - e loaʻa ana ka AI i nā ʻāpana pili a me ka pane.

Hoʻouna i kekahi