Consider this scenario, if we navigate to the example.com/downloads and our route handler contains that route, the router handler will take the downloads component and place it into the placeholders of our page.
Setting Up for Routing
ng generate module app-routing —routing —flat —module app
ng generate module app-routing, will create a module call app-routing.
The —routing flag will add the necessary codes in the module so that it will become a route handler.
The —flat flag will place the file inside the app folder instead of creating its own folder.
And the —module flag will add the routing module inside our app module so it will be used in the application
<router-outlet></router-outlet>
Now we are set up for routing, we have our route handler and a placeholder for the route handler to place components in.
Defining Routes
const routes: Routes = [];
const routes: Routes = [
Let’s try it. Since we do not have a component, create a component call downloads with the ng generate component command. Then set the component property of the route to the component.
ng generate component downloads
<p>downloads works!</p>
Let’s verify that. Save the project and start the local server. Open the browser and go to localhost:4200/downloads.
As you can see, the contents in the downloads components is being displayed.
Wildcard Routes
ng generate component Error
Go to the app-routing module file and add a wildcard route. To indicate that route is the wildcard route, we set the path property of the route with the double Asterix syntax. Lastly, use the error component for the component property.
As you can see, even though we did not define a route for downloads2, we still displayed something on the screen.
Recap