Pages Shown up but Texts are not display Angular-CodePudding

i am a beginner of angular.i am creating a small website on angular.i set routes successfully.but when i click the url links goes to the paticular page but text are not visible i don't why what i tried so far i attached below.

Routes Sections

const routes: Routes = [
  {path: '', component: IndexComponent},
  {path: '/about', component: AboutComponent},
  {path: '/contact', component: ContactComponent}
];

app.component.html

<div >
  <div >
      <div >
          <h1>Welcome</h1>
      </div>
  </div>

<div >
  <div >
      <ul >
          <a href="/" >Index</a>
          <a href="/about" >About</a>
          <a href="/contact" >Contact</a>
        </ul>
  </div>
</div>
<router-outlet></router-outlet>
</div>

about.component.html

<h1>About</h1>

<p>about works!</p>

contact.component.html

<p>contact works!</p>

CodePudding user response：

const routes: Routes = [
  {path: '', component: IndexComponent},
  {path: '/about', component: AboutComponent},
  {path: '/contact', component: ContactComponent}
];

Instead of this use without slash

const routes: Routes = [
      {path: '', component: IndexComponent},
      {path: 'about', component: AboutComponent},
      {path: 'contact', component: ContactComponent}
    ];

And also change the HTML page href to routerlink.

<a href="/" >Index</a>
<a href="/about" >About</a>
<a href="/contact" >Contact</a>

<a routerLink="/" >Index</a>
<a routerLink="/about" >About</a>
<a routerLink="/contact" >Contact</a>

CodePudding user response：

In routing use this

       const routes: Routes = [
     {path: '', component: IndexComponent},
     {path: 'about', component: AboutComponent},
     {path: 'contact', component: ContactComponent}
      ];