'localhost:4200 is a blank page in Angular

After login, the default link is => http://localhost:4200/dashboard/administration/portfolio

enter image description here

If I remove /portfolio from the address http://localhost:4200/dashboard/administration

and I press "enter",

enter image description here

Automatically is displayed, http://localhost:4200/dashboard/administration/portfolio, I want to keep this system for all paths.

If I remove /administration/portfolio and press enter,

enter image description here

Automatically the page is directed to http://localhost:4200/dashboard/administration/portfolio.

So far everything is working perfectly.

My problem, if I remove dashboard/administration/portfolio.

So the link is http://localhost:4200/ then enter.

I have a blank page, I don't automatically return to http://localhost:4200/dashboard/administration/portfolio, I don't understand why?

enter image description here

I think it's a problem with a route?

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    canActivate: [CanActivateTeam],
    loadChildren: () => import('./views/dashboard/dashboard.module').then((m) => m.DashboardModule),
  },


  {
    path: 'sessions',
    loadChildren: () => import('./views/identity/identity.module').then((m) => m.IdentityModule),
  },
  { path: 'pipes', loadChildren: () => import('./shared/pipes/pipes.module').then(m => m.PipesModule) },

  // others
  {
    path: '**', redirectTo: ''
  },
  
];

dashboard-routing.module.ts

const DASHBOARD_ROUTES: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,

    children: [
      {
          path: '',
          redirectTo: 'administration',
          pathMatch: 'full'
      },
      {
        path: 'administration',
        loadChildren: () =>
          import('./views/administration/administration.module').then(
            (m) => m.AdministrationModule
          ),
      },
      {
        path: 'market',
        loadChildren: () =>
          import('./views/market/market.module').then((m) => m.MarketModule),
      },
      {
        path: 'dta',
        loadChildren: () =>
          import('./views/dta/dta.module').then((m) => m.DtaModule),
      },
    ],
  },
];

administration-routing.module.ts

export const ADMINISTRATION_ROUTES: Routes = [
 
  {
    path: '',
    component: AdministrationComponent,

    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'portfolio',
      },

      {
        path: 'portfolio',
        component: PortfolioComponent,
      },
      {
        path: 'account-opening',
        component: AccountOpeningComponent,
      },

      {
        path: 'corporate-action',
        component: CorporateActionComponent,
      },
      {
        path: 'visualization-deposit',
        component: VisualizationDepositComponent,
      },
    ],
  },
];

Thanks for your help.

angular

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'localhost:4200 is a blank page in Angular

Sources

Related Questions