146. Redirecting and Wildcard Routes

Jul 15, 2026 05:37 · 4:36 · English · Whisper Turbo · 3 Garsiakalbiai

Šis transkriptas baigia galioti šiandien. Atnaujinti, kad būtų užtikrintas nuolatinis saugojimas →

Lekcijų indeksas

0:02

S… Speaker 1 (146. Redirecting and Wildcard Routes)

Whoa, you already learned a lot about routing.

0:05

S… Speaker 1 (146. Redirecting and Wildcard Routes)

We're nearing the end.

0:07

S… Speaker 1 (146. Redirecting and Wildcard Routes)

But did you ever wonder what happens if we enter something

0:11

S… Speaker 1 (146. Redirecting and Wildcard Routes)

here, which we don't cover?

0:12

S… Speaker 1 (146. Redirecting and Wildcard Routes)

Like let's say it's just slash something.

0:15

S… Speaker 1 (146. Redirecting and Wildcard Routes)

We get an error because clearly we

0:19

S… Speaker 1 (146. Redirecting and Wildcard Routes)

don't have a route with slash something here.

0:22

S… Speaker 1 (146. Redirecting and Wildcard Routes)

So that is something we probably want to improve.

0:26

S… Speaker 1 (146. Redirecting and Wildcard Routes)

We want to do some 404 error handling.

0:29

S… Speaker 1 (146. Redirecting and Wildcard Routes)

We maybe want to redirect the user to a specific page

0:33

S… Speaker 1 (146. Redirecting and Wildcard Routes)

whenever he tries to visit a page we don't have.

0:36

S… Speaker 1 (146. Redirecting and Wildcard Routes)

These are the topics I'll focus on next.

0:39

S… Speaker 1 (146. Redirecting and Wildcard Routes)

Setting up a route which handles all routes we don't have

0:43

S… Speaker 1 (146. Redirecting and Wildcard Routes)

set up and redirecting requests.

0:45

S… Speaker 1 (146. Redirecting and Wildcard Routes)

Not necessarily to topics you use together,

0:48

S… Speaker 1 (146. Redirecting and Wildcard Routes)

but also not that uncommon.

0:51

S… Speaker 1 (146. Redirecting and Wildcard Routes)

So let's start with redirecting.

0:54

S… Speaker 1 (146. Redirecting and Wildcard Routes)

Let's say we add a new component to our application

0:58

S… Speaker 1 (146. Redirecting and Wildcard Routes)

and I will use the CLI for this with the GC for generate component command

1:02

S… Speaker 1 (146. Redirecting and Wildcard Routes)

and I'll name it page not found.

1:05

S… Speaker 1 (146. Redirecting and Wildcard Routes)

The page not found component which was added here in our app folder in

1:10

S… Speaker 1 (146. Redirecting and Wildcard Routes)

this new page not found folder.

1:12

S… Speaker 1 (146. Redirecting and Wildcard Routes)

I'll go to the spec file and here I

1:16

S… Speaker 1 (146. Redirecting and Wildcard Routes)

will simply say in the template

1:19

S… Speaker 1 (146. Redirecting and Wildcard Routes)

this page was not found.

1:21

S… Speaker 1 (146. Redirecting and Wildcard Routes)

Something like this.

1:22

S… Speaker 1 (146. Redirecting and Wildcard Routes)

Now I want to render this page in,

1:25

S… Speaker 1 (146. Redirecting and Wildcard Routes)

let's say,

1:26

S… Speaker 1 (146. Redirecting and Wildcard Routes)

the case that we visit a certain route.

1:28

S… Speaker 1 (146. Redirecting and Wildcard Routes)

I'll add it here at the bottom where the path

1:32

S… Speaker 1 (146. Redirecting and Wildcard Routes)

is for now something.

1:34

S… Speaker 1 (146. Redirecting and Wildcard Routes)

And in the something case here,

1:37

S… Speaker 1 (146. Redirecting and Wildcard Routes)

I want to load my page not found component.

1:40

S… Speaker 3 (146. Redirecting and Wildcard Routes)

Of course,

1:41

S… Speaker 1 (146. Redirecting and Wildcard Routes)

make sure that you added it to declarations and so on because we're still using it in our app,

1:45

S… Speaker 1 (146. Redirecting and Wildcard Routes)

of course.

1:46

S… Speaker 1 (146. Redirecting and Wildcard Routes)

So with this in place,

1:49

S… Speaker 1 (146. Redirecting and Wildcard Routes)

If we now save this,

1:51

S… Speaker 1 (146. Redirecting and Wildcard Routes)

go back to our application and visit slash something,

1:54

S… Speaker 1 (146. Redirecting and Wildcard Routes)

we of course see this page was not found.

1:57

S… Speaker 1 (146. Redirecting and Wildcard Routes)

Now let's change something to not found.

2:01

S… Speaker 1 (146. Redirecting and Wildcard Routes)

And let's make sure that once we add another new route,

2:05

S… Speaker 1 (146. Redirecting and Wildcard Routes)

which then is something,

2:07

S… Speaker 1 (146. Redirecting and Wildcard Routes)

let's say, we don't also have to add component here,

2:11

S… Speaker 1 (146. Redirecting and Wildcard Routes)

but we redirect to another route,

2:14

S… Speaker 1 (146. Redirecting and Wildcard Routes)

to the not found route maybe.

2:16

S… Speaker 1 (146. Redirecting and Wildcard Routes)

For this,

2:17

S… Speaker 1 (146. Redirecting and Wildcard Routes)

we got another property we can add to any route config here.

2:21

S… Speaker 1 (146. Redirecting and Wildcard Routes)

So, of course,

2:22

S… Speaker 1 (146. Redirecting and Wildcard Routes)

also to any of the other routes.

2:23

S… Speaker 1 (146. Redirecting and Wildcard Routes)

If you don't want to specify a component to load,

2:26

S… Speaker 1 (146. Redirecting and Wildcard Routes)

you can say redirect to.

2:29

S… Speaker 1 (146. Redirecting and Wildcard Routes)

Now,

2:30

S… Speaker 1 (146. Redirecting and Wildcard Routes)

this is an alternative to component.

2:32

S… Speaker 1 (146. Redirecting and Wildcard Routes)

Component loads the specific component,

2:34

S… Speaker 1 (146. Redirecting and Wildcard Routes)

redirect to redirects to another path.

2:37

S… Speaker 1 (146. Redirecting and Wildcard Routes)

So,

2:38

S… Speaker 1 (146. Redirecting and Wildcard Routes)

here, you can specify any path,

2:40

S… Speaker 1 (146. Redirecting and Wildcard Routes)

and the path maybe now is slash not found.

2:43

S… Speaker 1 (146. Redirecting and Wildcard Routes)

So,

2:44

S… Speaker 1 (146. Redirecting and Wildcard Routes)

now, if you do this,

2:46

S… Speaker 1 (146. Redirecting and Wildcard Routes)

you see that it automatically redirected.

2:49

S… Speaker 1 (146. Redirecting and Wildcard Routes)

So let me show you this again by typing slash something,

2:52

S… Speaker 1 (146. Redirecting and Wildcard Routes)

watch the URL,

2:53

S… Speaker 1 (146. Redirecting and Wildcard Routes)

it redirects to slash not found.

2:56

S… Speaker 1 (146. Redirecting and Wildcard Routes)

And all the other routes,

2:57

S… Speaker 1 (146. Redirecting and Wildcard Routes)

of course, still work.

2:58

S… Speaker 1 (146. Redirecting and Wildcard Routes)

So this is how we can use redirection.

3:02

S… Speaker 2 (146. Redirecting and Wildcard Routes)

Now,

3:03

S… Speaker 1 (146. Redirecting and Wildcard Routes)

of course, it's not very convenient to define slash something here because you probably

3:07

S… Speaker 1 (146. Redirecting and Wildcard Routes)

can't define all possible wrong URLs the

3:11

S… Speaker 1 (146. Redirecting and Wildcard Routes)

user can enter.

3:12

S… Speaker 1 (146. Redirecting and Wildcard Routes)

So a more convenient way to catch all

3:17

S… Speaker 1 (146. Redirecting and Wildcard Routes)

routes which are not covered by your app is to use the

3:21

S… Speaker 1 (146. Redirecting and Wildcard Routes)

double asterisk route here.

3:23

S… Speaker 1 (146. Redirecting and Wildcard Routes)

This is the wildcard route,

3:25

S… Speaker 1 (146. Redirecting and Wildcard Routes)

which means...

3:26

S… Speaker 1 (146. Redirecting and Wildcard Routes)

Catch all paths you don't know.

3:29

S… Speaker 1 (146. Redirecting and Wildcard Routes)

And the order is super important here.

3:32

S… Speaker 1 (146. Redirecting and Wildcard Routes)

Make sure that this very generic route is the

3:36

S… Speaker 1 (146. Redirecting and Wildcard Routes)

last one in your array of routes because your routes get

3:40

S… Speaker 1 (146. Redirecting and Wildcard Routes)

parsed from top to bottom here.

3:42

S… Speaker 1 (146. Redirecting and Wildcard Routes)

So if this was actually at the beginning,

3:45

S… Speaker 1 (146. Redirecting and Wildcard Routes)

you would always get redirected.

3:48

S… Speaker 1 (146. Redirecting and Wildcard Routes)

As I can quickly show you by saving this like this.

3:51

S… Speaker 2 (146. Redirecting and Wildcard Routes)

Now,

3:51

S… Speaker 1 (146. Redirecting and Wildcard Routes)

no matter where you click,

3:53

S… Speaker 1 (146. Redirecting and Wildcard Routes)

you always are redirected to not found.

3:56

S… Speaker 1 (146. Redirecting and Wildcard Routes)

So make sure this is the last route here in your setup.

3:59

S… Speaker 1 (146. Redirecting and Wildcard Routes)

And with this,

4:01

S… Speaker 1 (146. Redirecting and Wildcard Routes)

now all the other routes work.

4:04

S… Speaker 1 (146. Redirecting and Wildcard Routes)

But if you enter anything invalid here,

4:07

S… Speaker 1 (146. Redirecting and Wildcard Routes)

you always get redirected to not found because now

4:11

S… Speaker 1 (146. Redirecting and Wildcard Routes)

you're using this wildcard route,

4:13

S… Speaker 1 (146. Redirecting and Wildcard Routes)

catching all routes which are unknown to Angular at this point of

4:17

S… Speaker 1 (146. Redirecting and Wildcard Routes)

time once it reaches this line here.

4:19

S… Speaker 1 (146. Redirecting and Wildcard Routes)

And which then redirects to the not found route,

4:23

S… Speaker 1 (146. Redirecting and Wildcard Routes)

which displays the page not found.

4:25

S… Speaker 1 (146. Redirecting and Wildcard Routes)

page or component.

4:27

S… Speaker 1 (146. Redirecting and Wildcard Routes)

This is how you can redirect and make sure you catch

4:31

S… Speaker 1 (146. Redirecting and Wildcard Routes)

routes you're not covering right now

Šis transkriptas buvo sukurtas AI (automatinis kalbos atpažinimas). Gali būti klaidų — patikrinti pagal originalų garso kritinį naudojimą. PG politika

❤️ Patinka STT.ai? Pasakyk draugams!

Santrauka

Spustelėkite Sumarizuokite, kad sukurtumėte šio stenogramos AIS santrauką.

Klausti AI apie šį transkriptą

Paklauskite apie šį stenogramą: AI ras atitinkamus skyrius ir atsakys.

Perrašyti kitą