All language subtitles for 8. Adding Home and NotFound Routes

Our application looks pretty good but there is one or two little remaining issues.

If I go to the address bar right now and delete slash collections and just try to go back to a local

host forty two hundred I get a empty little box right here which is not very pretty.

Be kind of nice if we had some default content to show to the user anytime they come to our landing

page.

One other issue.

If the user goes to any other route like some random gibberish like you see right here we get an error

message and the user sees nothing at all as well.

I want to handle both those scenarios I want to handle the case in which a user goes to our route route

now also want to hold a case in which a user goes to some random wrapped they handle these two cases.

We're going to generate two additional components.

One component is going to be called the home component molded displayed to the user.

Anytime they come to a local host already two hundred will also create a second component called the

not found component that will displace a message to the user that says something like sorry but can't

find the component or the root or that whatever that you're looking for.

Let's go over to our command line and we're gonna generate these two components

inside Mike comps project directory all run energy generate components.

I'll call this first one home and we'll create a second one I'll call it not found you'll notice right

away that when I generated these components I did not tie them to any module inside of my project.

So whenever we have an angular project that uses modules we do not have to specifically place every

component that we make inside of a module.

You can just have some them just free floating if there's no better location for them.

If I go backwards my code editor will now see that inside my app directory I have some folders that

correspond to an actual module and some like home and not found that correspond to normal components.

That is totally fine and you should expect inside this app directory to have some folders that contain

modules and some that contain components if we want to now display these two components.

We just added we would add them to our app routing module.

Remember when we first generated our project we used that energy new command we added on dash dash routing

to the very end that generated our app as usual or the app module but it also added in an app routing

module as well inside this app routing module.

We will add any root configuration that doesn't make sense to place with some other module though in

our scenario we want to display the home component in the not found component and it doesn't really

make a lot of sense to place any routing logic tied to those components inside of any other module.

It makes the most sense to just associate this as some routing information with the app routing module

instead we're going to add in some rules inside this routes array right here.

It will say display either the home component or not found under some given scenario.

Let's first wire up just the home component by itself go inside the app routing module at the very top.

I'm going to import the home component which we just generated from the home lash home doc component

file and inside of this roots array.

I'll say that whenever a user goes to a path of empty string but empty string right there means just

localized already 200 by itself of user ever goes to localized forty two hundred.

I want to show that component Home component

actually before we add in that second one.

Let's do a quick test of just the home component.

So as soon as we add in that cycle 1 we're going to actually see some interesting behavior.

If I now look back over I might look list forty two hundred and I see home works.

I can still go to elements or collections.

It looks like those components work as well let's now try also wiring up the not found components.

The writing out this additional row is gonna be a little bit more challenging because in this scenario

we want to say that if a user goes to any route that we don't understand we want to show the not found

components to get started.

I'll first import the not found component that we just generated from not found not found component.

Now add in a second object inside this array to add in an additional routing rule go inside this object

I'm going to add in a path of Star Star or asterisk asterisk.

This means that if we do not find some other route to display to the user and just show this component

you can really think of this as being like a wild card.

It means no matter what the route is just go ahead and show this component.

All put in component not found component.

I got to tell you right now that as soon as we test this out we're gonna start to see some really strange

behavior.

Let's say this go back over here and see what is going wrong if I know go back over and I go to just

local host forty two hundred I see homeworks.

OK good enough.

If I go to localized forty two point thirty two hundred and then some gibberish I see not found works.

Awesome.

That is what we want.

However if I go to elements I still see not found works.

If I go to collections I also still see not found works.

Right now it appears that are not found component is somehow elbowing the collections or the elements

roots right here out of the way we are accidentally showing them not found component when we should

be showing these collections home where the elements home components.

Let's take a pause right here we can come back the next video and take a look at a diagram to understand

exactly why this is occurring and how we can very easily fix it.