In Angular why will the HTML body of my component not show?

March 2, 2022

I can navigate to the component just fine, and the header/sidebar load fine, and even the component typescript works correctly.

But none of the HTML is displaying. This is specifically for the dashboard/:id route.

Any ideas?

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login.component';
import { DashboardComponent } from './views/dashboard/dashboard.component';

// Import Containers
import { DefaultLayoutComponent } from './containers';

// AuthGaurd
import { IdguardGuard as IdAuthGaurd } from './idguard.guard';
import { AdminGuard as AdminGuard } from './admin.guard';
import { ClientgaurdGuard as ClientAuthGaurd } from './clientgaurd.guard';


export const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'dashboard/:id',
        component: DashboardComponent,
        canActivate: [IdAuthGaurd, ClientAuthGaurd]
      },
      {
        path: 'base',
        loadChildren: () =>
          import('./views/base/base.module').then((m) => m.BaseModule),
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'top',
    anchorScrolling: 'enabled',
    relativeLinkResolution: 'legacy'
}),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

>Solution :

You are redirecting to home but you don’t have home path in the same level:

Change it to:


export const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  {
    path: 'home',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'dashboard/:id',
        component: DashboardComponent,
        canActivate: [IdAuthGaurd, ClientAuthGaurd]
      },
      {
        path: 'base',
        loadChildren: () =>
          import('./views/base/base.module').then((m) => m.BaseModule),
      }
    ]
  }
];

And the navigate to /home/dashboard/:id.

Or:


export const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'dashboard/:id',
        component: DashboardComponent,
        canActivate: [IdAuthGaurd, ClientAuthGaurd]
      },
      {
        path: 'base',
        loadChildren: () =>
          import('./views/base/base.module').then((m) => m.BaseModule),
      }
    ]
  }
];

This will work with no change in navigation. Just navigate to /dashboard/:id.