Lazy loading modules with routing in Angular 2

Question

In my app I have main module and its router and submodule and its router.

Main module (and its router) has few paths like:

/login
/sign-up
/ask
etc

The submodule has lots of paths:

/countries/edit
/countries/:id
/countries/
/coutries/search
etc

I want to do lazyloading of submodule.

I do now like this:

main router:

export const routes: Routes = [
    {
        path: "login", // to sign in or to see information about current logged user
        loadChildren: "app/login/login.module"
    },
    {
        path: "sign-up", // to sing up new users
        loadChildren: "app/signup/sign-up.module"
    },
    {
        path: "home", // to see home page
        loadChildren: "app/home/home.module"
    },
    {   // directory to see, edit, search countries
        path: "countries",
        loadChildren: "app/country/country.module"
    }

The router of submodule:

{   // to see list of countries, press like and delete a country
    path: "",
    component: CountryViewAllComponent
},
{
    // CR[done] try to avoid inline comments.
    path: "search",
    component: CountrySearchComponent
},
{
    path: "edit",
    component: CountryChangeComponent,
},
{
    path: ":id",
    component: CountryDetailComponent
}

My app works perfect if I enter on main page / and after navagate by pages clicking on links. But if I reload page for example /countries/search it moves me to countries page and gives exception: "Cannot match any routes: 'search'"

Have you looked at the docs? They show how to lazy load routes, it seems that you need pathMatch: 'full' at the root of your submodule. — jonrsharpe
– jonrsharpe, Commented Dec 3, 2016 at 10:53

omalyutin · Accepted Answer · 2017-01-08 19:10:42Z

1

You are missing pathMatch:full and check how you have used RouterModule.forChild(routes) or forRoot.. for better reference see this doc:

Lazy loading module (Angular 2 training book)

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EagerComponent } from './eager.component';

const routes: Routes = [
  { path: '', redirectTo: 'eager', pathMatch: 'full' },
  { path: 'eager', component: EagerComponent },
  { path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }
];

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

edited Jan 8, 2017 at 19:10

omalyutin

4547 silver badges27 bronze badges

answered Dec 4, 2016 at 16:33

user7248467

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

Collectives™ on Stack Overflow

Lazy loading modules with routing in Angular 2

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related