Router module - ws-types/ws-angular-x GitHub Wiki

The router module in ws-angular-x is like the RouterModule in angular4+

Conf for RouterModule

// routes config in your main application module
const rootRoutes: Routes = [
    { path: "lazy", loadChildren: "./lazy/lazy.module#LazyModule" },
    { path: "errors", loadChildren: "./errors/errors.module#ErrorsModule", state: "errors" },
    { path: "home", component: FirstComponent },
    { path: "", redirectTo: "home" },
    // if router match nothing, you must redirect to a url, not a state,
    // so make sure you set the property "redirectToPath" instead of "redirectTo"
    { path: "**", redirectToPath: "errors/notfound" }
];
@NgModule({
    imports: [
        RouterModule.forRoot(rootRoutes),
    ......

and this is the root routes:

[
    {url: "/lazy", state: "lazy_02d2ff20B9a5498bB66d5ea4dc3f5470.**"},
    {url: "/home", component: "firstComponent", state: "home_d614a27d2aa24a168f33E857f28978b4"},
    {url: "", redirect: "home_d614a27d2aa24a168f33E857f28978b4", state: "__default"},
    {url: "**", redirect: "handle => errors/notfound", state: "__otherwise"}
]

then conf the children routes in lazy modules

const childRoutes: Route = {
    state: "", children: [
        { path: "index", component: LazyAComponent },
        { path: "details/:detailsId?{homeId}&{seed}", params: ["detailsId", "homeId", "seed"], component: LazyBComponent },
        { path: "others", loadChildren: "./subLazy/sub.module#LazyOthersModule" },
        { path: "", redirectTo: "index" },
    ]
};

@NgModule({
    imports: [
        RouterModule.forChild(childRoutes)
    ],

the routes tree will be updated:

[
    {
        url: "/lazy", state: "lazy_02d2ff20B9a5498bB66d5ea4dc3f5470.**", children:[
            {url: "/index", component: "lazyAComponent", state: "index_a075be0d774e4b908f0b98d6a7376f29"},
            {url: "/details/:detailsId?{homeId}&{seed}", component: "lazyBComponent", state: "details/:detailsId?{homeId}&{seed}_e20b58cbE3184981A7aa2946feecc415"},
            {url: "/others", state: "others_184d1317B4c045279a6fAf05a707f4ba.**"},
            {url: "", redirect: "index_a075be0d774e4b908f0b98d6a7376f29", state: "lazy_02d2ff20B9a5498bB66d5ea4dc3f5470"},
            {url: "/", redirect: "index_a075be0d774e4b908f0b98d6a7376f29", state: "1f6ba954-81d1-427c-b3af-c0fd85b1cac2"}
        ]
    },
    {url: "/home", component: "firstComponent", state: "home_d614a27d2aa24a168f33E857f28978b4"},
    {url: "", redirect: "home_d614a27d2aa24a168f33E857f28978b4", state: "__default"},
    {url: "**", redirect: "handle => errors/notfound", state: "__otherwise"}
]

You should work with $location service if you want to navigate a lazy state.