<router-outlet> is displaying and entire page even when not called-CodePudding

I'm working on a blog project and am inexperienced when it comes to angular routing, however, I am pretty sure this is not supposed to happen. When I put my in the home component or home.component.html, it displays the page again so that I have like 2 versions of the same page on top of each other. Tell me if I need to include more stuff

EDIT: I've tried to give router-outlet a name and it seems to solve the current issue but then whenever I try to go onto /articles, it redirects back to home page

app.component.html

<div >
  <nav>
<div >
  <img  src="./assets/images/3d-printer.png" alt="home button">
</div>
<ul >
  <li><a routerLink="/" routerLinkActive="active" (click)="toggle()">blog page</a></li>
  <li><a routerLink="/articles" routerLinkActive="active">all articles</a></li>
  <li>contact</li>
</ul>
<div >
  <h4>logo</h4>
</div>
</nav>
<div >
  <div >
    My blog about things
  </div>
</div>

<app-home></app-home>
<router-outlet></router-outlet>

<div >
  <a href="https://www.flaticon.com/free-icons/3d-printing" title="3d printing icons">3d printing icons created by
    Freepik - Flaticon</a>
</div>

app-routing.module.ts

const routes: Routes = [
  {
      path: '',
      component: AppComponent,
  },
  {
      path: 'timeline',
      component: TimelineComponent,
  },
{
    path: 'article',
    component: articleComponent,
},
{
    path: 'allarticles',
    component: AllarticlesComponent,
},

{
    path: '**',
    redirectTo: '/'
}
];
  
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

I linked to /articles in a ts file.

CodePudding user response：

You have your AppComponent Component listed as your default '' route. So it basically renders the AppComponent inside itself, thus repeating the AppHome Component.

To mitigate this, you could delete the <app-home> component from your AppComponent's template and instead render it via the router:

app.component.html

<app-home></app-home> <-- DELETE THIS
<router-outlet></router-outlet>

app-routing.module.ts

  {
      path: '',
      component: HomeComponent, // <-- Instead of AppComponent
  },

CodePudding user response：

For the first route, with with empty path, you need:

{
   path: '',
   component: AppComponent,
   pathMatch: 'full'
},

Although it probably should'nt point to AppComponent as the default routed component