title: Angular 7 Router keep redirecting me to the 404 not found page
body: <p>I have a small Angular 7 project, where I have embedded the <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> directive within a <code>navigation</code> component. When I click on a link to navigate to a different path, the router initial redirects to that path, but then routes to the base URL, which then routes to a 404 page I have setup. </p>
  
  <p>Can someone advise what I may be doing wrong? I suspect it's how I am using the <code>navigation</code> component.</p>
  
  <p><code>src\app\app-routing.module.ts</code></p>
  
  <pre><code>const routes: Routes = [
    {
      path: 'lunch-forms',
      component: LunchFormsComponent,
      children: [],
    },
    {
      path: 'profile',
      component: UserProfileComponent,
      children: [],
    },
    {
      path: 'teachers',
      component: TeacherListComponent,
      children: [],
    },
    {
      path: 'login',
      component: LoginComponent,
      children: [],
    },
    { path: '**', component: PageNotFoundComponent },
    { path: '', redirectTo: 'login', pathMatch: 'full' },
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, { enableTracing: true })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p><code>src\app\app.component.html</code></p>
  
  <pre><code>&lt;div&gt;
    &lt;app-navigation&gt;&lt;/app-navigation&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>src\app\components\navigation\navigation.component.html</code></p>
  
  <pre><code>&lt;mat-sidenav-container class="sidenav-container"&gt;
    &lt;mat-sidenav #drawer class="sidenav" fixedInViewport
        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
        [mode]="(isHandset$ | async) ? 'over' : 'side'"
        [opened]="(isHandset$ | async) === false"&gt;
      &lt;mat-card class="profile-card" *ngIf="user"&gt;
        &lt;mat-card-header&gt;
          &lt;div mat-card-avatar 
            class="profile-header-image" 
            [ngStyle]="{'background-image': 'url(' + user.photoURL + ')'}"&gt;&lt;/div&gt;
          &lt;mat-card-title&gt;{{ user.displayName }}&lt;/mat-card-title&gt;
          &lt;mat-card-subtitle&gt;{{ user.email }}&lt;/mat-card-subtitle&gt;
        &lt;/mat-card-header&gt;
      &lt;/mat-card&gt;
      &lt;mat-nav-list&gt;
        &lt;a mat-list-item href="#" (click)="this.router.navigate(['/'])"&gt;Welcome&lt;/a&gt;
        &lt;a mat-list-item href="#" (click)="this.router.navigate(['/lunch-forms'])"&gt;Lunch Forms&lt;/a&gt;
        &lt;a mat-list-item href="#" (click)="this.router.navigate(['/profile'])"&gt;Profile&lt;/a&gt;
        &lt;a mat-list-item href="#" (click)="this.router.navigate(['/teachers'])"&gt;Teachers&lt;/a&gt;
        &lt;a mat-list-item href="#" (click)="logout()"&gt;Logout&lt;/a&gt;
      &lt;/mat-nav-list&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content&gt;
      &lt;mat-toolbar color="primary"&gt;
        &lt;button
          type="button"
          aria-label="Toggle sidenav"
          mat-icon-button
          (click)="drawer.toggle()"
          *ngIf="isHandset$ | async"&gt;
          &lt;mat-icon aria-label="Side nav toggle icon"&gt;menu&lt;/mat-icon&gt;
        &lt;/button&gt;
        &lt;span&gt;TCS Lunch Forms&lt;/span&gt;
      &lt;/mat-toolbar&gt;
      &lt;!-- Content --&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p><code>src\app\components\navigation\navigation.component.ts</code></p>
  
  <pre><code>import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
  import { Component } from '@angular/core';
  import { Router } from '@angular/router';
  
  import { Observable } from 'rxjs';
  import { map, shareReplay } from 'rxjs/operators';
  
  import { AuthService } from 'src/app/services/auth.service';
  
  @Component({
    selector: 'app-navigation',
    templateUrl: './navigation.component.html',
    styleUrls: ['./navigation.component.scss']
  })
  export class NavigationComponent {
  
    isHandset$: Observable&lt;boolean&gt; = this.breakpointObserver.observe(Breakpoints.Handset)
      .pipe(
        map(result =&gt; result.matches),
        shareReplay()
      );
  
    constructor(
        private authService: AuthService,
        private breakpointObserver: BreakpointObserver,
        private router: Router) {}
  
    isLoggedIn(): boolean {
      return this.authService.authenticated;
    }
  
    logout(): void {
      this.authService.logout();
      this.router.navigate(['']);
    }
  
    get user(): firebase.User {
      return this.authService.user;
    }
  
  }
  </code></pre>
  
  <p>Router debugging output:</p>
  
  <pre><code>Router Event: NavigationStart platform-browser.js:1075
  NavigationStart(id: 2, url: '/lunch-forms') platform-browser.js:1066
  Object { id: 2, url: "/lunch-forms", navigationTrigger: "imperative", restoredState: null }
  platform-browser.js:1066
  Router Event: RoutesRecognized platform-browser.js:1075
  RoutesRecognized(id: 2, url: '/lunch-forms', urlAfterRedirects: '/lunch-forms', state: Route(url:'', path:'') { Route(url:'lunch-forms', path:'lunch-forms') } ) platform-browser.js:1066
  Object { id: 2, url: "/lunch-forms", urlAfterRedirects: "/lunch-forms", state: {…} }
  platform-browser.js:1066
  Router Event: GuardsCheckStart platform-browser.js:1075
  GuardsCheckStart(id: 2, url: '/lunch-forms', urlAfterRedirects: '/lunch-forms', state: Route(url:'', path:'') { Route(url:'lunch-forms', path:'lunch-forms') } ) platform-browser.js:1066
  Object { id: 2, url: "/lunch-forms", urlAfterRedirects: "/lunch-forms", state: {…} }
  platform-browser.js:1066
  Router Event: ChildActivationStart platform-browser.js:1075
  ChildActivationStart(path: '') platform-browser.js:1066
  Object { snapshot: {…} }
  platform-browser.js:1066
  Router Event: ActivationStart platform-browser.js:1075
  ActivationStart(path: 'lunch-forms') platform-browser.js:1066
  Object { snapshot: {…} }
  platform-browser.js:1066
  Router Event: GuardsCheckEnd platform-browser.js:1075
  GuardsCheckEnd(id: 2, url: '/lunch-forms', urlAfterRedirects: '/lunch-forms', state: Route(url:'', path:'') { Route(url:'lunch-forms', path:'lunch-forms') } , shouldActivate: true) platform-browser.js:1066
  Object { id: 2, url: "/lunch-forms", urlAfterRedirects: "/lunch-forms", state: {…}, shouldActivate: true }
  platform-browser.js:1066
  Router Event: ResolveStart platform-browser.js:1075
  ResolveStart(id: 2, url: '/lunch-forms', urlAfterRedirects: '/lunch-forms', state: Route(url:'', path:'') { Route(url:'lunch-forms', path:'lunch-forms') } ) platform-browser.js:1066
  Object { id: 2, url: "/lunch-forms", urlAfterRedirects: "/lunch-forms", state: {…} }
  platform-browser.js:1066
  Router Event: ResolveEnd platform-browser.js:1075
  ResolveEnd(id: 2, url: '/lunch-forms', urlAfterRedirects: '/lunch-forms', state: Route(url:'', path:'') { Route(url:'lunch-forms', path:'lunch-forms') } ) platform-browser.js:1066
  Object { id: 2, url: "/lunch-forms", urlAfterRedirects: "/lunch-forms", state: {…} }
  platform-browser.js:1066
  Router Event: ActivationEnd platform-browser.js:1075
  ActivationEnd(path: 'lunch-forms') platform-browser.js:1066
  Object { snapshot: {…} }
  platform-browser.js:1066
  Router Event: ChildActivationEnd platform-browser.js:1075
  ChildActivationEnd(path: '') platform-browser.js:1066
  Object { snapshot: {…} }
  platform-browser.js:1066
  Router Event: NavigationEnd platform-browser.js:1075
  NavigationEnd(id: 2, url: '/lunch-forms', urlAfterRedirects: '/lunch-forms') platform-browser.js:1066
  Object { id: 2, url: "/lunch-forms", urlAfterRedirects: "/lunch-forms" }
  platform-browser.js:1066
  Router Event: Scroll platform-browser.js:1075
  Scroll(anchor: 'null', position: 'null') platform-browser.js:1066
  Object { routerEvent: {…}, position: null, anchor: null }
  platform-browser.js:1066
  
  Navigated to http://localhost:4200/#
  [WDS] Disconnected! client:172
  
  Router Event: NavigationStart platform-browser.js:1075
  NavigationStart(id: 1, url: '/') platform-browser.js:1066
  Object { id: 1, url: "/", navigationTrigger: "imperative", restoredState: null }
  platform-browser.js:1066
  Angular is running in the development mode. Call enableProdMode() to enable the production mode. core.js:38780
  Router Event: RoutesRecognized platform-browser.js:1075
  RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'**') } ) platform-browser.js:1066
  Object { id: 1, url: "/", urlAfterRedirects: "/", state: {…} }
  platform-browser.js:1066
  Router Event: GuardsCheckStart platform-browser.js:1075
  GuardsCheckStart(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'**') } ) platform-browser.js:1066
  Object { id: 1, url: "/", urlAfterRedirects: "/", state: {…} }
  platform-browser.js:1066
  Router Event: ChildActivationStart platform-browser.js:1075
  ChildActivationStart(path: '') platform-browser.js:1066
  Object { snapshot: {…} }
  platform-browser.js:1066
  Router Event: ActivationStart platform-browser.js:1075
  ActivationStart(path: '**') platform-browser.js:1066
  Object { snapshot: {…} }
  platform-browser.js:1066
  Router Event: GuardsCheckEnd platform-browser.js:1075
  GuardsCheckEnd(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'**') } , shouldActivate: true) platform-browser.js:1066
  Object { id: 1, url: "/", urlAfterRedirects: "/", state: {…}, shouldActivate: true }
  platform-browser.js:1066
  Router Event: ResolveStart platform-browser.js:1075
  ResolveStart(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'**') } ) platform-browser.js:1066
  Object { id: 1, url: "/", urlAfterRedirects: "/", state: {…} }
  platform-browser.js:1066
  Router Event: ResolveEnd platform-browser.js:1075
  ResolveEnd(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'**') } ) platform-browser.js:1066
  Object { id: 1, url: "/", urlAfterRedirects: "/", state: {…} }
  platform-browser.js:1066
  Router Event: ActivationEnd platform-browser.js:1075
  ActivationEnd(path: '**') platform-browser.js:1066
  Object { snapshot: {…} }
  platform-browser.js:1066
  Router Event: ChildActivationEnd platform-browser.js:1075
  ChildActivationEnd(path: '') platform-browser.js:1066
  Object { snapshot: {…} }
  platform-browser.js:1066
  Router Event: NavigationEnd platform-browser.js:1075
  NavigationEnd(id: 1, url: '/', urlAfterRedirects: '/') platform-browser.js:1066
  Object { id: 1, url: "/", urlAfterRedirects: "/" }
  platform-browser.js:1066
  Router Event: Scroll platform-browser.js:1075
  Scroll(anchor: 'null', position: 'null') platform-browser.js:1066
  Object { routerEvent: {…}, position: null, anchor: null }
  platform-browser.js:1066
  </code></pre>