title: Angular routing not working - 404 error not found
body: <p>I have a simple Angular example where routing simply does not work. Every other component I already put in there works, but since today no other components work. When calling the path I always get "error 404 /test" form Angular CLI.</p>
  
  <p>Here is my app.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core'
  import { BrowserModule } from '@angular/platform-browser'
  import { RouterModule } from '@angular/router'
  
  import { EventAppComponent } from './events-app.component'
  import { EventsListComponent } from './events/events-list.component'
  import { EventThumbnailComponent } from './events/events-thumbnail.component'
  import { NavBarComponent } from './nav/navbar.component'
  import { EventDetailsComponent } from './events/event-details/event-details.component'
  import { CreateEventComponent } from './events/create-event.component'
  import { Error404Component } from './errors/404.component'
  import { TestComponent } from './events/test.component'
  
  import { EventService } from './events/shared/event.service'
  import { ToastrService } from './common/toastr.service'
  import { EventRouteActivator } from './events/event-details/event-route-activator.service'
  
  import { appRoutes } from './route'
  
  @NgModule({
      imports: [
          BrowserModule,
          RouterModule.forRoot(appRoutes)
      ], 
      declarations: [
          EventAppComponent,
          EventsListComponent,
          EventThumbnailComponent,
          EventDetailsComponent,
          NavBarComponent,
          CreateEventComponent,
          Error404Component,
          TestComponent
      ],
      providers: [ EventService, ToastrService, EventRouteActivator ],
      bootstrap: [ EventAppComponent ]
  })
  
  export class AppModule {}
  </code></pre>
  
  <p>Here is my route.ts</p>
  
  <pre><code>import { Routes } from '@angular/router'
  import { EventsListComponent } from './events/events-list.component'
  import { EventDetailsComponent } from './events/event-details/event-details.component'
  import { CreateEventComponent } from './events/create-event.component'
  import { Error404Component } from './errors/404.component'
  import { EventRouteActivator } from './events/event-details/event-route-activator.service'
  import { TestComponent } from './events/test.component'
  
  export const appRoutes: Routes = [
      { path: 'test', component: TestComponent },
      { path: 'events/new', component: CreateEventComponent },
      { path: 'events', component: EventsListComponent },
      { path: 'events/:id', component: EventDetailsComponent, canActivate: [EventRouteActivator] },
      { path: '404', component: Error404Component },
      { path: '', redirectTo: '/events', pathMatch: 'full' }
  ]
  </code></pre>
  
  <p>test.component.ts (not working localhost:8808/test)</p>
  
  <pre><code>import { Component } from '@angular/core'
  
  @Component({
    template:
    `
      &lt;h1&gt;Hello World&lt;/h1&gt;
    `,
    styles: [``]
  })
  
  export class TestComponent {
    constructor() {
  
    }
  }
  </code></pre>
  
  <p>Here is a working component (localhost:8808/404):</p>
  
  <pre><code>import { Component } from '@angular/core'
  
  @Component({
    template: `
      &lt;h1 class="errorMessage"&gt;404'd&lt;/h1&gt;
    `,
    styles: [`
      .errorMessage { 
        margin-top:150px; 
        font-size: 170px;
        text-align: center; 
      }`]
  })
  
  export class Error404Component {
    constructor() {
  
    }
  }
  </code></pre>
  
  <p>When renaming</p>
  
  <pre><code>{ path: '404', component: Error404Component },
  </code></pre>
  
  <p>to </p>
  
  <pre><code>{ path: '405', component: Error404Component },
  </code></pre>
  
  <p>I also get this error. What am I missing? When Strg+Click on the Component name VS Code takes me to the class so the filepath is correct I guess.</p>
  
  <p><strong>EDIT:</strong> I can also change</p>
  
  <pre><code>{ path: '', redirectTo: '/events', pathMatch: 'full' }
  </code></pre>
  
  <p>to</p>
  
  <pre><code>{ path: '', redirectTo: '/test', pathMatch: 'full' }
  </code></pre>
  
  <p>then I get redirect to the correct page @ localhost:8808/test. But after hitting enter again in the URL bar to directly go to this URL, it fails again.</p>