title: SOLVED! Angular 9 routerlink and router-outlet problems
body: <p>I have a problem with a exercise that i'm current doing and i can't finish because of the routes, I have a child view and can't use routerLink is not clickable!</p>
  
  <ul>
  <li><p>I have a view for making the login that redirect to a home component that has child components and in there the routes links does't work, stay like a normal text.</p></li>
  <li><p>When i try to use the router-outlet
  the compile gisves the error:</p>
  
  <p>ERROR in exercise/home/home.component.html:15:5 - error NG8001: 'router-outlet' is not a known element:</p>
  
  <ol>
  <li>If 'router-outlet' is an Angular component, then verify that it is part of this module.</li>
  <li>If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.</li>
  </ol>
  
  <p>15     
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p>
  
  <p>exercise/home/home.component.ts:6:16
      6   templateUrl: './home.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component HomeComponent.</p></li>
  </ul>
  
  <p>the cenario is like this:</p>
  
  <p>1- app.component.html has a navbar for redirect to anothers pages and works fine, my problem starts with the route for exercise
  2- the views are:</p>
  
  <p><strong>exercise
  login
  home
   view1
   view2</strong></p>
  
  <p>3- I have a input on login pagem that redirects to home, who has a navbar to redirect to view1 and view2 but the "routerLink" and the "router-outlet" doesn't work.
  4- My files are above
  5- Angular version 9.0.3</p>
  
  <p>Can some one help to understand wath i'm doing wrong?!</p>
  
  <p>========================= 
  <strong><em>SOLUTION: Add the MISSING COMPONENT HomeComponent on the declarations</em></strong></p>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { NotFoundComponent } from './not-found/not-found.component';
  import { UrlParamsComponent } from './url-params/url-params.component';
  import { FormsModule } from '@angular/forms';
  import { UserComponent } from './child-route/user/user.component';
  import { ExerciseComponent } from './exercise/exercise.component';
  import { SimpleRouteComponent } from './simple-route/simple-route.component';
  import { CodeDrivenComponent } from './code-driven/code-driven.component';
  import { QueryParamsComponent } from './query-params/query-params.component';
  import { ChildRouteComponent } from './child-route/child-route.component';
  import { LoginComponent } from './exercise/login/login.component';
  
  @NgModule({
     declarations: [
        AppComponent,
        NotFoundComponent,
        UrlParamsComponent,
        UserComponent,
        ExerciseComponent,
        SimpleRouteComponent,
        CodeDrivenComponent,
        QueryParamsComponent,
        ChildRouteComponent,
        LoginComponent,
     ],
     imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule
     ],
     providers: [],
     bootstrap: [
        AppComponent
     ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>===========================
  app.component.html</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
    &lt;a class="navbar-brand" routerLink=""&gt;Angular Routing&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
      aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" routerLink="/" routerLinkActive="active"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" routerLink="simple-route" routerLinkActive="active"&gt;Simple-route&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" routerLink="code-driven" routerLinkActive="active"&gt;Code-Driven&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" routerLink="url-params" routerLinkActive="active"&gt;Url-Params&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" routerLink="query-params" routerLinkActive="active"&gt;Query-Params&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" routerLink="child-route" routerLinkActive="active"&gt;Child-Route&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" routerLink="exercise/login" routerLinkActive="active"&gt;Exercise&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;div class="container"&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>=====================================
  app-routing.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { NotFoundComponent } from './not-found/not-found.component';
  import { UrlParamsComponent } from './url-params/url-params.component';
  import { UserComponent } from './child-route/user/user.component';
  import { USER_CHILD_ROUTES } from './child-route/user/user.routes';
  import { HomeComponent } from './exercise/home/home.component';
  import { HOME_CHILD_ROUTES } from './exercise/home/home-routing';
  import { SimpleRouteComponent } from './simple-route/simple-route.component';
  import { CodeDrivenComponent } from './code-driven/code-driven.component';
  import { FirstRouteComponent } from './simple-route/first-route/first-route.component';
  import { SecondRouteComponent } from './simple-route/second-route/second-route.component';
  import { FirstCodeDriverComponent } from './code-driven/first-code-driver/first-code-driver.component';
  import { SecondCodeDriverComponent } from './code-driven/second-code-driver/second-code-driver.component';
  import { UrlParamsFirstComponent } from './url-params/url-params-first/url-params-first.component';
  import { UrlParamsSecondComponent } from './url-params/url-params-second/url-params-second.component';
  import { QueryParamsComponent } from './query-params/query-params.component';
  import { QueryParamsFirstComponent } from './query-params/query-params-first/query-params-first.component';
  import { ChildRouteComponent } from './child-route/child-route.component';
  import { ExerciseComponent } from './exercise/exercise.component';
  import { LoginComponent } from './exercise/login/login.component';
  
  const routes: Routes = [
  
    // simple link routes
    { path: "simple-route", component: SimpleRouteComponent },
    { path: "simple-route/first-route", component: FirstRouteComponent },
    { path: "simple-route/second-route", component: SecondRouteComponent },
  
    // code routes
    { path: "code-driven", component: CodeDrivenComponent },
    { path: "code-driven/first-code-driver", component: FirstCodeDriverComponent },
    { path: "code-driven/second-code-driver", component: SecondCodeDriverComponent },
  
    // Using URL PARAMS
    { path: "url-params", component: UrlParamsComponent },
    { path: "url-params/url-params-first/:message", component: UrlParamsFirstComponent },
    { path: "url-params/url-params-second/:message", component: UrlParamsSecondComponent },
  
    // Using Query PARAMS
    { path: "query-params", component: QueryParamsComponent },
    { path: "query-params/query-params-first/:message", component: QueryParamsFirstComponent },
  
    // Child routes
    { path: "child-route", component: ChildRouteComponent },
    { path: "child-route/user/:id", component: UserComponent, children: USER_CHILD_ROUTES },
  
    // Exercise
    { path: "exercise", component: ExerciseComponent },
    { path: "exercise/login", component: LoginComponent },
    { path: "exercise/home/:username", component: HomeComponent, children: HOME_CHILD_ROUTES },
  
    // redirects to the home-root component
    // { path: "", redirectTo: "", pathMatch: "full" },
  
    // not found any route
    { path: "**", component: NotFoundComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>and here is my problem, I cant click on the routers</p>
  
  <p>===============
  home.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
  
    user: User = new User();
  
    constructor(activatedRoute: ActivatedRoute) {
  
      activatedRoute.params.subscribe((params) =&gt; {
        this.user.username = params['username'];
      });
    }
  
    ngOnInit() {
    }
  
  }
  
  class User {
    username: string;
  }
  </code></pre>
  
  <p>=================================
  home.component.html</p>
  
  <pre><code>&lt;hr&gt;
  
  &lt;ul class="nav navbar-nav item"&gt;
      &lt;li&gt;
          &lt;a routerLink='View1'&gt;View1&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a routerLink="View2"&gt;View2&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;h1&gt;Welcome Home, {{user.username}}&lt;/h1&gt;
  
  &lt;div class="container"&gt;
      &lt;!-- &lt;router-outlet&gt;&lt;/router-outlet&gt; --&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;a routerLink="exeercise/login"&gt;Logout&lt;/a&gt;
  
  ===================================
  home-routing.ts
  
  import { Routes } from '@angular/router';
  import { View1Component } from './view1/view1.component';
  import { View2Component } from './view2/view2.component';
  
  export const HOME_CHILD_ROUTES: Routes = [
      { path: "view1", component: View1Component },
      { path: "view2", component: View2Component }
  ];
  
  ====================================
  login.component.ts
  
  import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
    username: string;
  
    constructor(private router: Router) { }
  
    ngOnInit(): void {
    }
  
    login() {
      console.log('TRIGGER LOGIN...', this.username);
      this.router.navigate(['exercise/home', this.username]);
    }
  
  }
  </code></pre>
  
  <p>============================
  login.component.html</p>
  
  <pre><code>&lt;hr&gt;
  
  &lt;input [(ngModel)]="username" type="text"&gt;
  
  &lt;button (click)="login()"&gt;Login&lt;/button&gt;
  </code></pre>