I'm having trouble setting up child routes in my project.
I got to set up some routes in my Angular project as you can see below, these routes are working perfectly;
const ROUTES: Routes = [
{ path: '', component: HomeComponent },
{ path: 'restaurants', component: RestaurantsComponent },
{ path: 'restaurants/:id', component: RestaurantDetailComponent,
children: [
{ path: '', redirectTo: 'menu', pathMatch: 'full' },
{ path: 'menu', component: MenuComponent },
{ path: 'reviews', component: ReviewsComponent }
]},
{ path: 'about', component: AboutComponent },
{ path: 'order', component: OrderComponent },
{ path: 'order-summary', component: OrderSumaryComponent },
{ path: '**', component: NotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(ROUTES)
],
exports: [RouterModule]
})
export class AppRoutingModule { }
The next step of the project is to create the administrative area of the system, and on these routes I need to create new child routes, but I'm not having success,
const adminRoutes: Routes = [
{
path: 'admin-painel', component: MainComponent,
children: [
{ path: 'list-restaurant', component: ListRestaurantComponent },
{ path: 'criar', component: AddRestaurantComponent },
{ path: 'editar/:id', component: EditRestaurantComponent }
]
}
];
@NgModule ({
imports: [
RouterModule.forChild(adminRoutes)
],
exports: [
RouterModule
]
})
export class AdminRoutingModule { }
When I type the URL http://localhost:4200/admin-painel/list-restaurant
it generates this error below;
ERROR Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'ListRestaurantComponent'
Error: Cannot find primary outlet to load 'ListRestaurantComponent'
at getOutlet (router.es5.js:4712) [angular]
at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateRoutes (router.es5.js:4567) [angular]
at :4200/vendor.bundle.js:101955:58 [angular]
at Array.forEach (<anonymous>) [angular]
at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateChildRoutes (router.es5.js:4512) [angular]
at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateRoutes (router.es5.js:4577) [angular]
at :4200/vendor.bundle.js:101955:58 [angular]
at Array.forEach (<anonymous>) [angular]
at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateChildRoutes (router.es5.js:4512) [angular]
at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activate (router.es5.js:4486) [angular]
at :4200/vendor.bundle.js:101547:22 [angular]
at SafeSubscriber._next (Observable.js:107) [angular]
at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrSetError (Subscriber.js:232) [angular]
at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:174) [angular]
at getOutlet (router.es5.js:4712) [angular]
at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateRoutes (router.es5.js:4567) [angular]
at :4200/vendor.bundle.js:101955:58 [angular]
at Array.forEach (<anonymous>) [angular]
at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateChildRoutes (router.es5.js:4512) [angular]
at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateRoutes (router.es5.js:4577) [angular]
at :4200/vendor.bundle.js:101955:58 [angular]
at Array.forEach (<anonymous>) [angular]
at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateChildRoutes (router.es5.js:4512) [angular]
at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activate (router.es5.js:4486) [angular]
at :4200/vendor.bundle.js:101547:22 [angular]
at SafeSubscriber._next (Observable.js:107) [angular]
at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrSetError (Subscriber.js:232) [angular]
at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:174) [angular]
at resolvePromise (zone.js:683) [angular]
at :4200/polyfills.bundle.js:6444:17 [angular]
at Object.onInvokeTask (core.es5.js:4136) [angular]
defaultErrorLogger @ core.es5.js:1085
How do I get around this?
NOTE: The file of new routes to the administrative area is in another module.