A page stays empty (routing problem) in Angular

Published

When I click on the "Portfolio" hyperlink.

enter image description here

The Portfolio page isn’t display (see below)

enter image description here

I don’t completely understand the routing system.

Here is how my files are structured

enter image description here

In the folder -> Identity

identity.component.html

<router-outlet></router-outlet>

singin.component.html

<div
  class="top-bar"
  style="background-color: green; width: 100%; height: 98px;"
></div>

<h1 style="text-align: center">Singin page</h1>

<div style="text-align: center">
  <a href="portfolio">Portfolio</a>
</div>

In the folder -> *Admin

admin.component.html

<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu" />
<label for="openSidebarMenu" class="sidebarIconToggle">
  <div class="spinner diagonal part-1"></div>
  <div class="spinner horizontal"></div>
  <div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
  <ul class="sidebarMenuInner">
    <li>
      <a routerLink="portfolio"> <i class="fa fa-credit-card"></i>Portfolio </a>
    </li>
  </ul>
</div>

portfolio.component.html

<h1>Portfolio page</h1>

app.routing.module

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'identity',
  },
  {
    path: 'admin',
    component: AdminComponent,

    children: [
      {
        path: 'portfolio',
        component: PortfolioComponent,
      },
    ],
  },

  {
    path: 'identity',
    component: IdentityComponent,

    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'singin',
      },
      {
        path: 'singin',
        component: SinginComponent,
      },
    ],
  },
];

app.component.html

<router-outlet> </router-outlet>

I share you my code on Stackblitz

Thank you very much for your help.

Source: Angular Questions

Published
Categorized as angular Tagged

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq