1

I have multiple modules in angular app, which I load lazily. Every module has its own routing.

My top level routing

const appRoutes: Routes = [
    {
        path: "module1",
        loadChildren: "app/components/m1.module#MOduleOne"
    },
    {
        path: "module2",
        loadChildren: "app/components/m2.module#ModuleTwo"
    },
    {
        path: "**",
        redirectTo: "module1"
    }
];

In my ModuleTwo

import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { routes } from "./m2.routes";
import { AComponent } from "./a.component";
import { BComponent } from "./b.component";

import { CComponent } from "./c.component";

const components = [AComponent, BComponent,CComponent];

@NgModule({
    declarations: components,
    exports: components,
    imports: [RouterModule.forChild(routes)]
})
export class ModuleTwo { }

routing file

import { Routes } from "@angular/router";
import { AComponent } from "./a.component";
import { BComponent } from "./b.component";
import { BComponent } from "./c.component";

export const routes: Routes = [
    {
        path: "",
        component: AComponent,
        children: [
            {
                path: "b",
                component: BComponent
            },
            {
                path: "c",
                component: CComponent
            }, {
                path: "**",
                component: BComponent
            }
        ]
    }
];

a.component.html

<div>
    Hi 
    <router-outlet></router-outlet>
</div>

and b.component.html

<div>
    <div routerLink="/b">
        <i class="material-icons">local_shipping</i>
        <span>B</span>
    </div>

    <div routerLink="/c">
        <i class="material-icons">file_download</i>
        <span>C</span>
    </div>

</div>

Now on my http://localhost:4200/#/a, component a is loaded with b as child component.

But when i click the icons that redirects to /b and /c, it does not work and reload the page to the ModuleOne.

What can be the issue?

Update 1

I tried /b instead of b in path in route.ts.

Even If hit directly the URL http://localhost:4200/#/a/c, this just show the default page that is b component only.

Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
  • What if you use `b` instead of `/b`? If it still doesn't work, it would be much easier to find a solution if you could create a StackBlitz demo for this problem. – Andrei Gătej Sep 16 '21 at 17:47
  • @AndreiGătej updated the question, what i have tried – Sunil Garg Sep 17 '21 at 04:09
  • What I meant is to use `b` instead of `/b` in the **b.component.html** file. – Andrei Gătej Sep 17 '21 at 08:14
  • @AndreiGătej tried that too, even hitting the url like /a/c is not working :D – Sunil Garg Sep 17 '21 at 09:36
  • Could you create a StackBlitz app with the problem? – Andrei Gătej Sep 17 '21 at 09:41
  • @SunilGarg did you try to navigate with a click listener instead of a routerlink? something like: `(click)=navigateTo()` in the template and: `navigateTo(): void { this.router.navigate(["b"]) }` i have project with a quite similar structure and it works without a problem – EricKrg Sep 17 '21 at 11:41
  • @SunilGarg i did a bit more testing and got it to work by wrapping the `routerLink` input in Brackets like this: `
    test
    ` the documentation examples are also in that syntax: https://angular.io/api/router/RouterLink#relative-link-paths     – EricKrg Sep 17 '21 at 11:54

0 Answers0