Routing Issue using Angular

Question

I've installed AngularCLI and have been using VS Code to create my web app. So far, I have only created the folders from which I will create the individual views. I'm having issues with routing, however, despite there being no errors in my code. When I run my application I'm shown the basic home screen with some buttons and when I click these buttons I can see the address bar changes but the view does not. It seems to only display the initial app.component.html file which was created when I first created the project. Any advice or help will be greatly appreciated! Thanks in advance

Here's the code:

app.component.html:

<p> Hello, World!</p>
<h1> TITLE TITLE </h1>
<nav class="navbar navbar-expand navbar-dark bg-dark">
  <div class="navbar-nav">
      <a class="nav-item nav-link" routerLink="/">Home</a>
      <a class="nav-item nav-link" routerLink="/login">Login</a>
      <a class="nav-item nav-link" routerLink="/register">Register</a>
  </div>
</nav>

<!-- main content container -->
<div class="jumbotron">
  <div class="container">
      <div class="row">
          <div class="col-sm-8 offset-sm-2">
              <router-outlet></router-outlet>
          </div>
      </div>
  </div>
</div>

app.module.ts:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginPageComponent } from './login-page/login-page.component';
import { RegisterPageComponent } from './register-page/register-page.component';
import { HomePageComponent } from './home-page/home-page.component';
import { HeaderComponent } from './header/header.component';


@NgModule({
  declarations: [
    AppComponent,
    LoginPageComponent,
    RegisterPageComponent,
    HomePageComponent,
    HeaderComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.routing.ts: (I created this file for routing myself)

import { Routes, RouterModule } from '@angular/router' ;

import { HomePageComponent } from './home-page/home-page.component';
import { RegisterPageComponent } from './register-page/register-page.component';
import { LoginPageComponent } from './login-page/login-page.component';

const routes: Routes = [
  { path: 'login', component: LoginPageComponent},
  { path: 'register', component: RegisterPageComponent},
  { path: 'home', component: HomePageComponent},

  { path: '**', redirectTo: ''}
];

export const appRoutingModule = RouterModule.forRoot(routes);

app-routing.module.ts: (this one was created when the project was first generated)

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'login' , }
];

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

Answer 1

You are importing app-routing.module.ts in app.module.ts but the only route defined there is login, which does not have a corresponding component to render.

{ path: 'login' , }

I would suggest moving your route definitions from app.routing.ts to app-routing.module.ts then delete app.routing.ts .