How to configure routes in Angular

Asked

Viewed 108 times

0

I am having difficulty configuring daughter routes in my project.

I even 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 in these routes I need to create new daughter routes, but I am not succeeding, see how it is;

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 in the URL http://localhost:4200/admin-painel/list-restaurant it generate 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 problem?

NOTE: the file of new routes to the administrative area is in another module.

angular

1 answer

2


Checks whether in its component MainComponent has the tag <router-outlet></router-outlet>

  • That was the problem at first, thank you very much.

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.