--- title: Bitovi Academy - Adding Routing description: Learn how to add basic routing to components in an Angular application. --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting?hsLang=en-us) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting?hsLang=en-us) - ![Project management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project management](https://www.bitovi.com/services/agile-project-management-consulting?hsLang=en-us) - ![Product design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product design](https://www.bitovi.com/services/product-design-consulting?hsLang=en-us) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting?hsLang=en-us) - [View more → ](https://www.bitovi.com/digital-consulting-services?hsLang=en-us) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting?hsLang=en-us) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers?hsLang=en-us) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting?hsLang=en-us) - [Design Systems](https://www.bitovi.com/services/axure-figma-migration?hsLang=en-us) - [React](https://www.bitovi.com/services/frontend/react-consulting?hsLang=en-us) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting?hsLang=en-us) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native?hsLang=en-us) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting-1?hsLang=en-us) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study?hsLang=en-us) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign?hsLang=en-us) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp?hsLang=en-us) - [View more → ](https://www.bitovi.com/our-software-consulting-work?hsLang=en-us) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source?hsLang=en-us) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about perfecting software delivery ](https://bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships?hsLang=en-us) - [![Academy](https://www.bitovi.com/hubfs/limbo/icons/icon-academy.svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy/?hsLang=en-us) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse our tools or contribute to our open source mission. ](https://www.bitovi.com/open-source?hsLang=en-us) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com - [ Advanced JavaScript ](https://www.bitovi.com/academy/learn-advanced-javascript.html?hsLang=en-us) - [ DOM and jQuery ](https://www.bitovi.com/academy/learn-dom-jquery.html?hsLang=en-us) - [ Debug JavaScript ](https://www.bitovi.com/academy/learn-to-debug-javascript.html?hsLang=en-us) - [ Learn TypeScript ](https://www.bitovi.com/academy/learn-typescript.html?hsLang=en-us) - [ Learn React Native ](https://www.bitovi.com/academy/learn-react-native.html?hsLang=en-us) - [ Learn Web Components ](https://www.bitovi.com/academy/learn-web-components.html?hsLang=en-us) - [ Agile Program Management With Jira ](https://www.bitovi.com/academy/learn-agile-program-management-with-jira.html?hsLang=en-us) - [ Learn RxJS ](https://www.bitovi.com/academy/learn-rxjs.html?hsLang=en-us) - [ Giving a Training ](https://www.bitovi.com/academy/training.html?hsLang=en-us) - [ Learn Technology Consulting ](https://www.bitovi.com/academy/learn-technology-consulting.html?hsLang=en-us) - [ Learn React ](https://www.bitovi.com/academy/learn-react.html?hsLang=en-us) - [ Learn NgRx ](https://www.bitovi.com/academy/learn-ngrx.html?hsLang=en-us) - [ Learn Graphql ](https://www.bitovi.com/academy/learn-graphql.html?hsLang=en-us) - [ Learn Docker ](https://www.bitovi.com/academy/learn-docker.html?hsLang=en-us) - [ Learn CanJS ](https://www.bitovi.com/academy/learn-canjs.html?hsLang=en-us) - [ Learn Angular ](https://www.bitovi.com/academy/learn-angular.html?hsLang=en-us) - [ Why Angular? ](https://www.bitovi.com/academy/learn-angular/why-angular.html?hsLang=en-us) - [ Generate an App ](https://www.bitovi.com/academy/learn-angular/building-our-first-app.html?hsLang=en-us) - [ Creating Components ](https://www.bitovi.com/academy/learn-angular/creating-components.html?hsLang=en-us) - [ Creating Pipes ](https://www.bitovi.com/academy/learn-angular/creating-pipes.html?hsLang=en-us) - [ Adding Routing ](https://www.bitovi.com/academy/learn-angular/adding-routing.html?hsLang=en-us) - [ Creating Navigation ](https://www.bitovi.com/academy/learn-angular/creating-navigation.html?hsLang=en-us) - [ Fetching Data with Services ](https://www.bitovi.com/academy/learn-angular/restaurant-service.html?hsLang=en-us) - [ Rendering Data in Components ](https://www.bitovi.com/academy/learn-angular/pull-restaurant-data-into-view.html?hsLang=en-us) - [ Reactive Forms Data Binding ](https://www.bitovi.com/academy/learn-angular/state-city-options.html?hsLang=en-us) - [ Listening to Form Changes ](https://www.bitovi.com/academy/learn-angular/form-value-changes.html?hsLang=en-us) - [ Multi-parameter Services ](https://www.bitovi.com/academy/learn-angular/updating-service-params.html?hsLang=en-us) - [ Optional: Declarative State ](https://www.bitovi.com/academy/learn-angular/declarative-state.html?hsLang=en-us) - [ Writing Unit Tests ](https://www.bitovi.com/academy/learn-angular/writing-unit-tests.html?hsLang=en-us) - [ Creating Nested Routes ](https://www.bitovi.com/academy/learn-angular/nested-routes.html?hsLang=en-us) - [ Binding Component Data ](https://www.bitovi.com/academy/learn-angular/building-order-form.html?hsLang=en-us) - [ Creating Directives ](https://www.bitovi.com/academy/learn-angular/creating-directive.html?hsLang=en-us) - [ Order Service ](https://www.bitovi.com/academy/learn-angular/order-service.html?hsLang=en-us) - [ Order History Component ](https://www.bitovi.com/academy/learn-angular/order-history-component.html?hsLang=en-us) - [ Item Total Pipe ](https://www.bitovi.com/academy/learn-angular/item-total-pipe.html?hsLang=en-us) - [ Real Time Connections ](https://www.bitovi.com/academy/learn-angular/real-time-connection.html?hsLang=en-us) - [ Deploy App ](https://www.bitovi.com/academy/learn-angular/deploy-app.html?hsLang=en-us) - [ Advanced TypeScript ](https://www.bitovi.com/academy/advanced-typescript.html?hsLang=en-us) [View More Courses](https://www.bitovi.com/academy/#courses) [ ] # Adding Routing `page` Learn how to add basic routing to components in an Angular application. ## Overview In this part, we will: - Add two routes to our generated routing module - Hook the router outlet into our markup - Test that new routes are working ## Problem We need to set up routes for the home view and restaurant view. ## What you need to know ## Router Outlet [`RouterOutlet`](https://angular.io/api/router/RouterOutlet) is an Angular directive that is a placeholder for content that is filled when the route changes. In this example the `HomeComponent` template or the `AboutComponent` template are shown below the `` element as the route changes. ``` ``` ## Router To be able to navigate between different views in our app, we can take advantage of Angular’s built-in routing module. Angular generated `src/app/app-routing.module.ts` for us and included it in our root module. `src/app/app-routing.module.ts` currently looks like: ``` import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ``` The router module takes an array of routes we can generate in a few different ways that will render content in the `router-outlet` directive. ## Setting Paths to Components The following example will render the `AboutComponent` in the router-outlet when the path is `/about`: ``` ``` ## Using Wildcards The next example uses the wildcard path, which will render the `PageNotFoundComponent` when any unregistered route is hit: ``` ``` ## Redirecting Routes This example shows one route redirecting to another: ``` ``` ## Setting Paths to Modules As our applications grow, it doesn’t make sense to load all the code at once. Thanks to [lazy loading](https://angular.io/guide/lazy-loading-ngmodules), we can wait to render modules until a specific route requiring them is hit. ``` const routes: Routes = [ { path: 'about', component: AboutComponent }, { path: 'team', redirectTo: '/about', pathMatch: 'full' }, { path: 'products', loadChildren: () => { return import('./products/products.module').then(m => m.ProductsModule); } }, { path: '**', component: PageNotFoundComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) class AppRoutingModule { } ``` ## In our `index.html` file, the angular cli included ` PlaceMyOrder ``` ## Technical requirements Create routes for the `HomeComponent` and `RestaurantComponent`. When the route is `""`, the `HomeComponent` should display, and when the route is `/restaurants` the `RestaurantComponent` should display. These changes should be made in **src/app/app-routing.module.ts**. Notice that you will be able to click the **Choose a Restaurant** button after implementing the solution: ![Choose a restaurant routing.](https://bitovi.github.io/academy/static/img/angular/4-adding-routing/after.gif) ## Setup ``, which handles routing to a component based on a url, was added to our **src/app/app.component.html** file when we first generated our app. But since that time, we added components to that view. Let’s remove those components because `` will handle showing those components going forward. ✏️ Update **src/app/app.component.html** to: ```

Place My Order App: Coming Soon!

``` ## How to verify your solution is correct If you have completed the exercise successfully you should be able to see the home component when the app loads, and the restaurant component when you navigate to [localhost:4200/restaurants](http://localhost:4200/restaurants). You may have noticed the `routerLink` attribute on the `` tag in our home component markup. This one of the ways we link to specific routes in our app. When you click that link, you should see the restaurants component. ``` Choose a Restaurant ``` ✏️ Update the spec file **src/app/app.component.spec.ts** to be: ``` import { Location } from '@angular/common'; import { NO_ERRORS_SCHEMA } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing'; import { Router } from '@angular/router'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; import { RestaurantComponent } from './restaurant/restaurant.component'; describe('AppComponent', () => { let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ imports: [AppRoutingModule], declarations: [AppComponent, HomeComponent, RestaurantComponent], schemas: [NO_ERRORS_SCHEMA], }).compileComponents(); fixture = TestBed.createComponent(AppComponent); }); it('should create the app', () => { const app = fixture.componentInstance; expect(app).toBeTruthy(); }); it(`should have as title 'place-my-order'`, () => { const app = fixture.componentInstance; expect(app.title).toEqual('place-my-order'); }); it('should render title in a h1 tag', () => { fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; expect(compiled.querySelector('h1')?.textContent).toContain( 'Place My Order App: Coming Soon!' ); }); it('should render the HomeComponent with router navigates to "/" path', fakeAsync(() => { const location: Location = TestBed.inject(Location); const router: Router = TestBed.inject(Router); fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; router.navigate(['']).then(() => { expect(location.path()).toBe(''); expect(compiled.querySelector('pmo-home')).not.toBe(null); }); })); it('should render the RestaurantsComponent with router navigates to "/restaurants" path', fakeAsync(() => { const location: Location = TestBed.inject(Location); const router: Router = TestBed.inject(Router); fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; router.navigate(['restaurants']).then(() => { expect(location.path()).toBe('/restaurants'); expect(compiled.querySelector('pmo-restaurant')).not.toBe(null); }); })); }); ``` ## Solution If you’ve implemented the solution correctly, the tests will pass when you run `npm run test`! Click to see the solution ✏️ Update **src/app/app-routing.module.ts** to: ``` import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { RestaurantComponent } from './restaurant/restaurant.component'; const routes: Routes = [ { path: '', component: HomeComponent, }, { path: 'restaurants', component: RestaurantComponent, }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], }) export class AppRoutingModule {} ``` ###### On this page... ###### Get help If you need [help](https://discord.gg/J7ejFsZnJ4) with an exercise, please reach out to us on [Discord](https://discord.gg/J7ejFsZnJ4) If you find a bug, please [create an issue](https://github.com/bitovi/academy/issues/new) or email [contact@bitovi.com](mailto:contact@bitovi.com?Subject=Training%20Suggestion) ## Join the Bitovi Newsletter Do you want to receive updates about new Bitovi Academy courses, Bitovi open source projects, and dev community news? If so, please provide your email. We won’t spam you or give it away for any reason! *By providing your email you agree to receive communications from Bitovi* ![](https://bitovi.github.io/academy/static/img/close.svg) ```json { "@context": "http://schema.org", "@type": "Organization", "mainEntityOfPage":{ "@type":"WebPage", "@id":"https://www.bitovi.com/academy/learn-angular/adding-routing.html", "description": "Learn how to add basic routing to components in an Angular application. " }, "url": "http://bitovi.com", "logo": "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "image": "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "name": "Bitovi Web App Consulting", "alternateName": "Bitovi", "naics": "541511", "description": "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "address": { "@type": "PostalAddress", "streetAddress": "1134 Pine Tree Lane ", "addressLocality": "Libertyville", "addressRegion": "IL", "addressCountry": "United States", "postalCode": "60048" }, "areaServed": { "@type": "GeoCircle", "geoMidpoint": { "@type": "GeoCoordinates", "latitude": "41.8781", "longitude": "87.6298" }, "geoRadius": "5000 km" }, "telephone": "312-620-0386", "email": "contact@bitovi.com", "sameAs": [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ] } ```