Reusable component not seen by children routes components

Question

I have 2 lazy loaded routes:

const routes: Routes = [
{
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then(m => m.LoginModule)
  },
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
  }
];

And dashboard route has children routes.

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    children: [
      {
        path: '',
        component: HomeComponent
      },
      {
        path: 'usuarios',
        component: UsersComponent
      }
    ]
  }
]

I have created a toolbar reusable component, which I wanna render on dashboard router-outlet, but when I navigate to the children routes of dashboard module, angular compiler says that the app-toolbar is not a component.

I've added the component on Dashboard module and tried on AppModule too, but I get the same result. Am I missing something?

Kenan Güler Kenan Güler · Accepted Answer · 2020-03-20T22:45:51

It's a common problem with the lazy loading routes in Angular, I believe. Although it is convenient to specify LoadChildren programmatically as you did, you have to use string instead, a la

loadChildren: './login/login.module#LoginModule',

Reusable component not seen by children routes components

1 Answers