task#15 outlet and default

Add routerOutlet and /auctions as default route

1. Add the routerOutlet to the template of your AppComponent.
2. Add an redirect to your book list of you open your app with an empty path.

Result

Start the test-auction-api server in a second console with $ test-auction-api if not yet running.

Compile and start the application with

ng serve

Open project in browser

• Open your browser with the address http://localhost:4200/
• In the browser window shall appear: http://localhost:4200/auctions

It should automatically navigate to the Default route /auctions.

Hints

File app.component.html

add:

<router-outlet></router-outlet>

delete or comment the existing app-auction-list.component selector

<h1>
  {{title}} <i class="fa fa-check"></i>
</h1>
<button class="btn btn-primary">Test Button</button>
<router-outlet></router-outlet>

File app-routing.module.ts

Add the default route definition:

{
  path: '',
  pathMatch: 'full',
  redirectTo: '/auctions'
}

Complete file app-routing.module.ts

We want to forward a call to / to /auctions.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {AuctionListComponent} from './auction-list/auction-list.component';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/auctions'
  },
  {
    path: 'auctions',
    component: AuctionListComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }