CODEWITHSUNDEEP
javascriptangularangular2-routing
Thabo
Thabo

Reputation: 1465

Angular feature routing module - Child component not loaded

I have a feature module that I load in the AppModule, the AppRoutingModule looks like

const appRoutes: Routes = [
  ...
  {
    path: 'move-request/:id',
    loadChildren: 'app/modules/move_requests/move_requests.module#MoveRequestModule'
  },
  ...
];

And the configuration of routing for the feature module looks like

const moveRequestRoutes: Routes = [

  {
    path: '',
    component: MoveRequestFormComponent,
    data: {title: 'Move Request'}
  },
  {
    path: 'move-request-success',
    component: RequestSuccessComponent,
    data: {title: 'Move request success'}
  },
];

I would like to navigate to MoveRequestFormComponent as the default component when move-request/:id is routed to, this works fine, but when I call 

this.router.navigate(['/move-request-success', {}]);

In MoveRequestFormComponent after some response from the server, I get

zone.js:665 Unhandled Promise rejection: Cannot match any routes. URL Segment: 'move-request-success' ; Zone: <root> ;

This configuration was working before I switched to Angular 6, Is it because of the change in the AppModule, where I have excluded this feature module as an import?

Any assistance on what I am missing would be much appreciated. As I have also tried with having a third component which will be the default component and uses the router-outlet to render the children and have a children property on this route to have as children

 {
   path: '',
   component: MoveRequestFormComponent,
   data: {title: 'Move Request'}
 },
 {
   path: 'move-request-success',
   component: RequestSuccessComponent,
   data: {title: 'Move request success'}
 },

But that also did not work, it stayed on the MoveRequestFormComponent, when 'move-request-success' was navigated to.Or maybe I should change the approach?

Upvotes: 0

Views: 1281

Answers (2)

Sachin Gupta
Sachin Gupta

Reputation: 5321

You don't have to import the feature module in AppModule as it is lazily-loaded. When you navigate to move-request/:id/move-request-success, the path matches the default route with path:'', and then it will look for and children of that route. You should add pathMatch:'full' to the first route, which is the default in this case. Since the mentioned route matches the first route and is unable to find and match any children, it is showing the error.

Upvotes: 2

J. S.
J. S.

Reputation: 2376

this.router.navigate(['/move-request-success', {}]);. If you add a / to a route this means you use absolute path from root. Have you tried without / ?

EDIT:

I think I see your problem. You navigate to a module with multiple components, which means after lazy loading the router configuration from the loaded module is used. This means

move-request/:id

Is the root of your module and every subroute needs to include the modules root in the url:

Your route should be move-request/:id/move-request-success

Urls in lazy loaded modules are:

module root (in your case move-request/:id) + configured route of the specific component (in your case move-request-success)

Upvotes: 2

Related Questions