CODEWITHSUNDEEP
angularangular5angular2-routingangular-routerrouter-outlet
Haris
Haris

Reputation: 221

Angular 5: child routes are not working when I have 2 router outlet in app

I have create routes on my module and import it as child.

in an module.Routing.ts

export  const routes: Routes = [
  {
    path : 'admin',
    component : IndexComponent,
    children :[
        { path: '', component: HomeComponent, outlet:'AdminRO' },
        { path: 'products', component: ProductsComponent, outlet: 'AdminRO' }
    ]
  }
];

export  const routing: ModuleWithProviders = RouterModule.forChild(routes);

IN app.routing.ts

I have this

const appRoutes: Routes = [
  { path: '', redirectTo: '/admin', pathMatch: 'full' },
  { path: 'login', component: AppLoginComponent }
];
export  const AppRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

now when its redirecting to the first homecomponent successfully. but when i try url localhost/admin/products.

its giving me an error

 Cannot match any routes. URL Segment: 'admin/products'

Upvotes: 1

Views: 523

Answers (2)

Waqas Ahmed
Waqas Ahmed

Reputation: 21

You need to remove AdminRO from the router outlet which you are using in the secondary module.

Upvotes: 2

Anto Antony
Anto Antony

Reputation: 872

Named outlets are the targets of secondary routes. If you want to navigate to secondary routes from browser, please enter the url as follows

http://.../admin(AdminRO:products)

The admin is the primary navigation. Parentheses surround the secondary route. The secondary route consists of an outlet name (AdminRO), a colon separator, and the secondary route path (products).

Upvotes: 0

Related Questions