@Angular routing not working - 404

Question

When I run angular router, I get the 404 status - page not found

I've been trying to follow the @angular docs to get the routing for a test site setup.

• Angular Routing Tutorial
• Angular Router Guide

It is partially working, because I setup a redirect in the app-routing.module.ts file, and it successfully redirects from localhost:4200 to localhost:4200/test.

However, once at that path I get a 404 error. It should be displaying the component I routed to that path.

Code

I have one component called anomalies

Project Structure

leaving out the files I believe to be non-relevant to this problem (I built the project with ng commands, so the rest should be as expected)

app/
  anomalies/
    anomalies.component.css
    anomalies.component.html
    anomalies.component.spec.ts
    anomalies.component.ts
  app-routing.module.ts
  app.module.ts

app-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { AnomaliesComponent } from './anomalies/anomalies.component';


const routes: Routes = [
  {
    path: 'test',
    component: AnomaliesComponent
  },
  {
    path: '',
    redirectTo: 'test',
    pathMatch: 'full'
  }
];

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

export class AppRoutingModule {}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { AnomaliesComponent } from './anomalies/anomalies.component';
import { AppRoutingModule } from './app-routing.module';


@NgModule({
  declarations: [
    AppComponent,
    AnomaliesComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

anomalies/anomalies.component.html

<p>
  anomalies works!

  well, not yet.
</p>

Answer 1

Defing two things in case its missed :

1. index.html should have a <base-href='/'>

2. You should have router-outlet defined in app.component.html <router-outlet></router-outlet>

Answer 2

the <router-outlet> tag was required in app.component.html

Code

app.component.html

<router-outlet></router-outlet>