How to Route to Feature Module

Question

I\'m trying to have a route from one module include a component from another module. The scheme I\'m trying to implement is: /group/feature which should show th

Answer 1

You have defined the route for 'group'. You haven't defined the route 'group/feature'.

Update:

Your group route looks like a plain route to /group, but group is actually a child module and you don't load the component, you loadChildren.

const routes: Routes = [
    {path: '', pathMatch: 'full', redirectTo: 'group'},
    {path: 'group', loadChildren: 'app/group/group.module#GroupModule},
    {path: '**', component: PageNotFoundComponent}
  ]
;

Answer 2

The first way. No children, no modules imported.

const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'group'},
  {path: 'group/feature', component: FeatureComponent },
  {path: 'group', component: GroupComponent},
  {path: '**', component: PageNotFoundComponent}
];

@NgModule({
  imports: [
  RouterModule.forRoot(routes,
  {enableTracing: false, useHash: false}
  )
],
exports: [
  RouterModule
]
})
export class AppRoutingModule {
}

The second way is to use children..

const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'group'},
  {path: 'group', component: GroupComponent,
   children: [
    { path: 'feature', component: FeatureComponent }]     
  },
  {path: '**', component: PageNotFoundComponent}
];

The third way is to import the module. It has its own

"<router-outlet></router-outlet>".

const ingestRoutes: Routes = [
  { path: 'group/feature', component: FeatureComponent,
    children: [       
      path: 'more', component: MoreComponent, // if you want to add..
        // this will route to group/feature/more
      path: '', component: FeatureHomeComponent,
    ] 
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(ingestRoutes)
  ],
  declarations: [
      FeatureComponent, FeatureHomeComponent, MoreComponent
  ],
  exports: [
    RouterModule
  ]
})
export class GroupRoutingModule {
}

The FeatureComponent.html has only

<route-outlet></router-outlet>. 

FeatureHomeComponent.html

- you can display anything here..YOUR ACTURE FEATURE COMPONENT.HTML

Export this in AppRoutingModule.

 const routes: Routes = [
    {path: '', pathMatch: 'full', redirectTo: 'group'},
    {path: 'group', component: GroupComponent},
    {path: '**', component: PageNotFoundComponent}
  ];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {enableTracing: false, useHash: 
    false}), GroupRoutingModule, // add this..
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {
}

All I do for 'apple brand' is to just import AppleRoutingModule in my AppRoutingModule. See link.Angular 4 route selection for category/subcategory or category/item for ecommerce web site

Answer 3

I figured it out: Adding the feature path in the children array of the group router worked:

In group-routing.module.ts:

const ingestRoutes: Routes = [
  {path: 'group', component: GroupComponent,
   children: [
     {path: 'feature', component: FeatureComponent}
  ]},
];

Thank you for all the responses and help!