URL changes but components not rendered on navigation in Angular

Question

I am trying to make routing through simple components through button click in Angular app I can see the url path is changing but the contents within the component's view is not rendered. I created app with routing module(app-routing.module.ts) I am trying to navigate to components named one , two from app.component.html through buttons.

app.component.ts:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'tan';

  constructor(private router: Router) { }  

    openOne(){
      this.router.navigate(['/one']);
      console.log("inside gotopath func")
    
    }
    openTwo(){
      this.router.navigate(['/two']);
      console.log("inside gotopath func")
    
    }

  
}

app.component.html

<button (click)="openOne()">ONE</button>     
<button (click)="openTwo()">TWO</button>      

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { OneComponent } from './one/one.component';
import { TwoComponent } from './two/two.component';

const routes: Routes = [ { path: 'one', component: OneComponent},{ path: 'two', component: TwoComponent}];

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

app.module.ts:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OneComponent } from './one/one.component';
import { TwoComponent } from './two/two.component';

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

one.component.html:

<p>one works!</p>

two.component.html

<p>two works!</p>

1st page with buttons to navigate

after clicking on ONE button

after clicking ONE button

after clicking on TWO button after clicking TWO button

while hovering over buttons it is not showing url path in the left bottom. I tried by removing all chrome extensions, disabling "Enable Javascript source maps" and "Enable css source map" in dev tool settings as suggested in stack overflow.

I am getting this error after sometime:

error

Earlier I often got this error: Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received.

and this:

[webpack-dev-server] Disconnected!

error after sometime

Please help me resolve this I am trying this for many days :(

Answer 1

If you want content to change dynamically based on the current route, then you need to add Router Outlet in your root component (root component is app.component in your case). For example:

app.component.ts

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

app.component.html

<!-- app.component.html -->
<!-- Display content for current route -->
<router-outlet></router-outlet>

Note that you should not place buttons which redirect to other components (or any other HTML) inside root component (app.component.html). Instead, create a new component (for example ParentComponent) which will display your required buttons.

parent.component.ts

// parent.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  constructor(private router: Router) {}

  openOne(){
    console.log("inside openOne func");
    this.router.navigate(['/one']);
  
  }
  openTwo(){
    console.log("inside openTwo func");
    this.router.navigate(['/two']);
  
  }
}

parent.component.html

<!-- parent.component.html -->
<button (click)="openOne()">ONE</button>     
<button (click)="openTwo()">TWO</button>

Now goto your routing module and set default path to this parent component.

app-routing.module.ts

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { OneComponent } from './one/one.component';
import { TwoComponent } from './two/two.component';
import { ParentComponent } from './parent/parent.component';

const routes: Routes = [
  { path: '', component: ParentComponent },
  { path: 'one', component: OneComponent},
  { path: 'two', component: TwoComponent}
];

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