Lazy loading of Module routing path issue

Question

I am trying to lazy load the module with angular 2.

I have two modules

AppModule (main module)
ProductModule (lazily loaded module)

AppModule.ts

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        RouterModule.forRoot([
            { path: 'welcome', component: WelcomeComponent },
            { path: '', redirectTo: 'welcome', pathMatch: 'full' },

            { path: 'products', loadChildren:'app/products/product.module#ProductModule'}
        ])
    ],
    declarations: [AppComponent,
        WelcomeComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Here I have two routes one is default route that is blank and one is welcome screen in AppModule. It contains one more route products to initiate lazy loading of modules and relevant component that is ProductModule.

and now ProductModule looks like this:

@NgModule({
    declarations: [
        ProductListComponent,
        ProductDetailComponent,
        ProductFilterPipe
    ],
    imports: [
        SharedModule,
        RouterModule.forChild([
            { path: '', component: ProductListComponent },
            { path: 'product/:id', component: ProductDetailComponent, pathMatch:'full'}
        ])
    ],
    providers: [
        ProductService,
        ProductDetailGuard
    ]
})
export class ProductModule {

}

as you can see my ProductModule is having empty routes (for listing product) and one route with product/id which shows product detail.

Now for the first route in ProductModule having ProductListComponent is activated when I navigated to http://localhost:3000/products which is OK but for the second route which is having ProductDetailComponent is activated when I navigated to http://localhost:3000/products/product/1.

Now for the detail screen url I do not wanted to have products in the url.

I have already tried specifying { path: 'products', component: ProductListComponent } route. But unluckily it doesn't worked.

Please explain me why it needs the products in the detail screen URL and how can I make it activated on http://localhost:3000/product/1 URL?

DeborahK · Accepted Answer · 2017-06-27 05:47:05Z

4

I recognize this code. :-) Have you seen my routing course? I cover this. For lazy loaded routes the base route has to be the same. So both routes need to start with 'products'.

Here is an example:

    RouterModule.forChild([
      {
        path: '',
        component: ProductListComponent
      },
      {
        path: ':id',
        component: ProductDetailComponent
      },
      {
        path: ':id/edit',
        component: ProductEditComponent,
        canDeactivate: [ProductEditGuard]
      }
    ])

The matching routing name is required because all of the lazy loaded routes need to share a parent route. Accessing that parent route for any child will lazy load the routes.

edited Jun 27, 2017 at 5:47

answered Jun 27, 2017 at 5:22

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jenish Rabadiya Over a year ago

@DeborahK Isn't there any way out there so that I can make it http://localhost:3000/product/1 without changing route products? Also please provide the link to your course.

DeborahK Over a year ago

app.pluralsight.com/library/courses/angular-routing/… Thanks for asking!

DeborahK Over a year ago

To answer your question ... you can remove lazy loading. Then you can name your routes anything you want. Or you could make your routes product and product/1. They just need to have the same parent route for lazy loading to work.

Collectives™ on Stack Overflow

Lazy loading of Module routing path issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related