Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,250 --> 00:00:05,280
The last video we added in that not found component in it is now being displayed.
2
00:00:05,400 --> 00:00:10,800
Even if we go to elements or collections than this video we're gonna figure out why this is and how
3
00:00:10,800 --> 00:00:11,990
we can fix it.
4
00:00:12,090 --> 00:00:13,310
Understand why this is occurring.
5
00:00:13,320 --> 00:00:17,550
We really need to think about all the different routing modules we have inside of our application right
6
00:00:17,550 --> 00:00:18,380
now.
7
00:00:18,450 --> 00:00:25,080
Remember a routing module defines a set of rules on Windows so any given component we have our elements
8
00:00:25,140 --> 00:00:27,090
routing the module.
9
00:00:27,090 --> 00:00:29,250
Here's our collections routing module.
10
00:00:29,310 --> 00:00:33,630
Then finally we also have now added in our app routing module.
11
00:00:33,640 --> 00:00:40,600
Now the question becomes what order does angular decide to process all these routing modules in.
12
00:00:40,870 --> 00:00:46,400
You can kind of imagine that behind the scenes we take all these routing rules and kind of pull them
13
00:00:46,400 --> 00:00:52,130
off here to assemble the entire set of rules but angular is going to use to decide what component to
14
00:00:52,130 --> 00:00:58,270
show on the screen we can kind of pull them all up and view them in this form right here.
15
00:00:59,520 --> 00:01:04,500
Now behind the scenes angular is going to take all these routing definitions and join them together
16
00:01:04,500 --> 00:01:11,910
into one list and whenever the URL changes angular is going to start from the very top and then go down
17
00:01:11,910 --> 00:01:15,720
to the bottom to decide what component to show on the screen.
18
00:01:15,780 --> 00:01:20,100
So it's going to take a look at the current year l The like Slash elements right there and it's going
19
00:01:20,100 --> 00:01:22,380
to say OK is it equal to elements.
20
00:01:22,380 --> 00:01:23,610
Yes or no.
21
00:01:23,610 --> 00:01:28,500
If it's not and it's going to move on to the next round is equal to collections yes or no.
22
00:01:28,500 --> 00:01:29,610
Is it equal to empty string.
23
00:01:29,610 --> 00:01:30,480
Yes or no.
24
00:01:30,480 --> 00:01:31,990
Is it anything else.
25
00:01:32,170 --> 00:01:38,010
And then the very first root that matches angular is going to stop right there and show that given component
26
00:01:38,900 --> 00:01:45,390
of the issue that we are in right now is that accidentally this wild card route is being added at the
27
00:01:45,390 --> 00:01:46,390
very top.
28
00:01:46,440 --> 00:01:50,250
Well in reality it's empty string and then the wildcard.
29
00:01:50,510 --> 00:01:53,590
But this is what is currently happening inside of our application.
30
00:01:53,800 --> 00:01:59,990
Whenever a user goes to any root instead of application angular first says is that equal to empty string.
31
00:02:00,030 --> 00:02:04,370
If it's not okay let's go onto the next one isn't equal to anything else.
32
00:02:04,380 --> 00:02:07,530
Any wildcard any series of characters whatsoever.
33
00:02:07,570 --> 00:02:12,070
Well of course the answer is always gonna be yes though angular is going to stop early and it's going
34
00:02:12,070 --> 00:02:16,670
to show the not found component and it's not going to display anything else.
35
00:02:16,950 --> 00:02:21,200
So that is the issue our set of routing rules is out of order.
36
00:02:21,210 --> 00:02:22,770
How do we fix this.
37
00:02:22,770 --> 00:02:25,050
Well it's very very simple.
38
00:02:25,050 --> 00:02:31,870
All we have to do is go to our app module not the routing module but the actual app module inside of
39
00:02:31,870 --> 00:02:36,390
our app directories inside of here is a list of imports.
40
00:02:36,390 --> 00:02:41,280
Remember we said that this imports list right here is going to contain all the different modules that
41
00:02:41,280 --> 00:02:45,070
the given module depends upon the behind the scenes.
42
00:02:45,090 --> 00:02:49,980
As soon as we add in this list of imports angular is going to take a look at each of these routing modules
43
00:02:50,430 --> 00:02:52,020
that's going to say okay for each of these.
44
00:02:52,020 --> 00:02:53,460
Do they have any routing rules.
45
00:02:53,460 --> 00:02:58,200
If they do it's going to add the routing rules from each of them in the same order that they are listed
46
00:02:58,200 --> 00:03:00,420
out inside of imports.
47
00:03:00,420 --> 00:03:06,150
Right now we can see that app routing module is listed first then elements and then collections that
48
00:03:06,150 --> 00:03:09,240
would result in a routing order that looks like this right here.
49
00:03:09,740 --> 00:03:15,400
But if we want to fix our problem we really want to get those two routing rules down here to the bottom.
50
00:03:15,750 --> 00:03:21,660
But all we have to do is take that app routing module and add it to the very end of the imports array
51
00:03:22,530 --> 00:03:25,570
etc. I'm going to zoom out here for a second.
52
00:03:25,600 --> 00:03:31,450
As you can see this very easily or better yet I'll just do some formatting is to make this all very
53
00:03:31,450 --> 00:03:38,710
clear I'm going to change it though at present angular is going to pull in first the app routing module
54
00:03:39,090 --> 00:03:40,050
and that's not what we want.
55
00:03:40,090 --> 00:03:43,300
We want angular to consider the routes inside of there.
56
00:03:43,300 --> 00:03:49,430
Last I was going to take app routing module I'm going to add it to the very end and I'll make sure I
57
00:03:49,430 --> 00:03:51,980
put a comma on the line right above.
58
00:03:52,030 --> 00:03:54,510
Now we should be in this scenario right here.
59
00:03:54,550 --> 00:04:01,170
You have first all of our elements routes then collections routes and then the app routing routes.
60
00:04:01,360 --> 00:04:03,240
All right let's now save that.
61
00:04:03,260 --> 00:04:10,340
I'll then flip back over and now I'm at at slash elements right here and I see elements homeworks collection
62
00:04:10,340 --> 00:04:15,560
homeworks I can go back to localized forty to hundred and I'll see homeworks and then finally I can
63
00:04:15,560 --> 00:04:19,640
go to anything else and I'll see not found works as well.
64
00:04:20,520 --> 00:04:22,980
Well let's say this works pretty well.
65
00:04:23,310 --> 00:04:24,680
Let's take a quick pause right here.
66
00:04:24,720 --> 00:04:29,460
We're gonna have a very brief aside in the next video where we're going to update the not found component
67
00:04:29,790 --> 00:04:34,890
and the home component as well just to show some better content than what they currently show.
68
00:04:34,920 --> 00:04:37,000
Quick pass I'll see you in just a moment.
7190
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Akan
Albanian
Amharic
Armenian
Azerbaijani
Basque
Belarusian
Bemba
Bengali
Bihari
Bosnian
Breton
Bulgarian
Cambodian
Catalan
Cebuano
Cherokee
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Faroese
Finnish
Galician
Georgian
German
Greek
Guarani
Haitian Creole
Hausa
Hawaiian
Hebrew
Hmong
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Kinyarwanda
Kirundi
Kongo
Korean
Krio (Sierra Leone)
Kurdish
Kyrgyz
Laothian
Latin
Latvian
Lithuanian
Luganda
Luo
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mauritian Creole
Moldavian
Mongolian
Myanmar (Burmese)
Montenegrin
Nepali
Norwegian
Pashto
Persian
Polish
Portuguese (Brazil)
Portuguese (Portugal)
Quechua
Romanian
Romansh
Russian
Samoan
Scots Gaelic
Serbian
Sesotho
Setswana
Seychellois Creole
Shona
Sindhi
Sinhalese
Slovak
Slovenian
Somali
Spanish
Swedish
Tajik
Thai
Tigrinya
Tonga
Turkish
Turkmen
Ukrainian
Uzbek
Vietnamese
Welsh
Wolof