angular issue on lazy route

Question

I am new to angular & googled for hours to find solutions on lazy route.
https://stackblitz.com/edit/angular-7jmk87

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent},
  { path: 'customers', loadChildren: './pages/customers/customers.module#CustomersModule' }
];

customer-routing.module.ts

const routes: Routes = [
    { 
      path: '', 
      component: CustomersComponent, 
    },
    { path: 'detail', component: CustomerDetailComponent },
];

what I want is to redirect to /customers/detail from /customers, but it return an error like Cannot match any routes. URL Segment: 'detail'.
I follow some examples but it still not solved yet.
I hope someone can give a hand to me. Thanks.

You can add /customers/ into the routeLink to work around. <a routerLink='/customers/detail'>Detail</a> — Toan Quoc Ho
– Toan Quoc Ho, Commented Sep 29, 2019 at 4:13
Do you want to go to customer detail component when clicked on customers link? — Pankaj Shukla
– Pankaj Shukla, Commented Sep 29, 2019 at 5:03

yurzui · Accepted Answer · 2019-09-29 04:50:55Z

3

You can use one of these options:

1) full url to the page

routerLink="/customers/detail"

2) relative url with ./

routerLink="./detail"

3) relative url without slash at the beginning

routerLink="detail"

In two latest options the router will look in the children of the current activated route.

Comments

Ganesh · Accepted Answer · 2019-09-29 05:25:43Z

0

If you want to use Lazy route, then you need to define the customer-routing.moudule as below:-

const routes: Routes = [
    { 
      path: '', 
      component: CustomersComponent, 
    },
    children :[{ path: 'detail', component: CustomerDetailComponent }]    
];

And your router link will be customers/detail in your HTML part.

Hope this will help u.

edited Sep 29, 2019 at 5:25

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

answered Sep 29, 2019 at 5:24

debasissaha

485 bronze badges

Comments

Abolfazl Roshanzamir · Accepted Answer · 2019-09-29 08:29:00Z

0

you can use routerLink to navigate as below:

<a [routerLink]="[ '../detail' ]">Redirect To Detail-1</a>

and

<a [routerLink]="[ 'detail' ]">Redirect To Detail-2</a>

Both of them are correct.

or

In the constructor of customer component inject the following service:

Router, ActivatedRoute

constructor(
  private router: Router,
  private route: ActivatedRoute) { }

Then if you want to redirect to detail component with (click) event , use the following:

<a (click)="redirectToDetail()"> Redirect To Detail </a>
redirectToDetail() {
  this.router.navigate(['../detail'], { relativeTo: this.route })
}

edited Sep 29, 2019 at 8:29

answered Sep 29, 2019 at 6:06

Abolfazl Roshanzamir

15.1k9 gold badges76 silver badges83 bronze badges

Collectives™ on Stack Overflow

angular issue on lazy route

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related