Angular7: Router-Outlet appends component instead of replacing it

Question

I have tried many solutions but did not find any solution. Even I did not import "BrowserAnimationModule" but still both html pages are showing on the same page.

Please help.

As per my code, Default component is the "AppComponent" and the other is "TwoComponent".

Now below is the code -

app.component.ts

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

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

}

app-component.html

<h2>App Component</h2>
<a routerLink="two">TWO</a>
<router-outlet></router-outlet>

Second Component

two.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-two',
  templateUrl: './two.component.html',
  styleUrls: ['./two.component.css']
})
export class TwoComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

two.component.html

<p>
  Two Component!
</p>

app.module.ts

import { TwoComponent } from './two/two.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';


@NgModule({
  declarations: [
    AppComponent,
    TwoComponent
  ],
  imports: [
    RouterModule.forRoot([{ path: 'two', component: TwoComponent }], { useHash: false }),
    BrowserModule,

  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

You have added the router-outlet to app.component.html so the second component is added into the app.component that is the expected behaviour

If you have three components say for example a root component AppComponent, and two child components OneComponent and TwoComponent.

The following will be your solution:

app.componnet.html

<h2>App Component</h2>
<a routerLink="one">ONE</a>
<a routerLink="two">TWO</a>
<router-outlet></router-outlet>

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
    {
       path: 'one',
       component:OneComponent,

    },
    {
       path: 'two',
       component:TwoComponent

    },
    {
         path: '',
         redirectTo: 'one',
         pathMatch: 'full',

    },
   ]
  },

  {
    path: '**',
    redirectTo: '/page-not-found'
  }
];

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

one.component.html

<p>
  One Component!
</p>

two.component.html

<p>
  Two Component!
</p>

app.module.ts

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