title: Angular routing module don't redirect or bring to the component
body: <p>I'm trying to start an angular project but for some reason the default application is not working.</p>
  <p>The application start without any error but the browser display an empty page instead of &quot;home works!&quot;.</p>
  <p>When I go to the login page, nothing happen and other links (like /hello) don't redirect me to the home.
  I think my routing module is not working at all.
  I can write anything in the url nothing happen.
  Here the code :</p>
  <p><strong>app-routing.module.ts :</strong></p>
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { LoginComponent } from './login/login.component';
  import { HomeComponent } from './home/home.component';
  import {EdoxiaGuard} from './services/guard/edoxia-guard.guard';
  
  const routes: Routes = [
    { path: '/', component: HomeComponent, canActivate:[EdoxiaGuard] },
    { path: '/login', component: LoginComponent, canActivate:[EdoxiaGuard] },
    { path: '**', redirectTo: '/' }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes,
      { enableTracing: true })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  export const routingComponents = [LoginComponent, HomeComponent]
  </code></pre>
  <p><strong>app.component.ts :</strong></p>
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'edoxia',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    title = 'edoxia-front';
  }
  
  </code></pre>
  <p><strong>app.module.ts :</strong></p>
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  
  import { AppRoutingModule, routingComponents } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { ToolbarComponent } from './shared/toolbar/toolbar.component';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  @NgModule({
    declarations: [
      AppComponent,
      routingComponents,
      ToolbarComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p><strong>app.component.html :</strong></p>
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p><strong>index.html :</strong></p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;fr&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;EdoxiaFront&lt;/title&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;edoxia&gt;&lt;/edoxia&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p><strong>home.component.html :</strong></p>
  <pre><code>&lt;p&gt;home works!&lt;/p&gt;
  </code></pre>
  <p><strong>home.component.ts :</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
  })
  export class HomeComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
  }
  </code></pre>
  <p><strong>login.component.html :</strong></p>
  <pre><code>&lt;p&gt;login works!&lt;/p&gt;
  </code></pre>
  <p><strong>login.component.ts :</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router, ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
  })
  export class LoginComponent implements OnInit {
  
    constructor(private router: Router, private route: ActivatedRoute) { }
  
    ngOnInit(): void {
    }
  
  }
  
  </code></pre>
  <p><strong>edoxia-guard.guard.ts :</strong></p>
  <pre><code>import { Injectable } from '@angular/core';
  import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
  import { Observable } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class EdoxiaGuard implements CanActivate {
    canActivate() {
      return true;
      }
  }
  </code></pre>