CODEWITHSUNDEEP
angularlazy-loading
john chan
john chan

Reputation: 223

angular issue on lazy route

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.

Upvotes: 2

Views: 135

Answers (3)

Abolfazl Roshanzamir
Abolfazl Roshanzamir

Reputation: 14892

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 })
}

Upvotes: 0

debasissaha
debasissaha

Reputation: 48

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.

Upvotes: 0

yurzui
yurzui

Reputation: 214305

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.

See also RouterLink documentation

Upvotes: 3

Related Questions