Angular routing based on http call

Question

Normally I use this kind of routing to load my components in app-routing.module.ts

const routes: Routes = [
{
path: '', component: HomeComponent
},
{
path: 'product-list', component: ProductListComponent
},
{
path: 'product', component: ProductComponent
}
];

But, I would like to base the routing on a http call to determine what component to load

For a example, I want to be able to have these URL's:

/nike

/nike-airmax

The first URL should load a product list page, and the second a product page

I have a http call to get the page type, it looks like this:

this.http.get(domain + 'api/ApiRoute?url=' + this.activatedRoute

(returns a int value, but it can return whatever I need)

Problem 1

I don't know how to call a service (that returns the type) from app-routing-module.ts

Problem 2

I don't know how to use the "type" from the service to determine the routing

Andrei · Accepted Answer · 2020-02-05 14:07:52Z

2

It is impossible to do with Angular built in routing as its configuration should be static. the best thing you can do is create your own SwitchComponent on a path: ':productName', where you will be able to render one of your required components with *ngIfs.

 ngOnInit(){
   this.activatedRoute.params.pipe(
     switchMap((params) => this.myService.getComponentType(params['productName']))
   ).subscribe(type => this.componentType = type);
 }

.....
<product *ngIf="componentType == 'product'"></product>
<product-list *ngIf="componentType == 'product-list'"></product-list>

answered Feb 5, 2020 at 14:07

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

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

5 Comments

Aluan Haddad Over a year ago

You are correct it's difficult to do with angular because of the static nature of routing, but I believe it is possible. One way to achieve it could be to have a lazy route that actually retrieves an entire NG module from a static url that actually serve different modules based on server-side logic. Admittedly, this would be rather awkward and probably not worth the trouble.

Andrei Over a year ago

even if you interfere into angular bundling and setup correct hashing logic on the backend you won't be able to navigate between paths. in case you've already downloaded ProductModule on a path /backendGeneratedModule you will no longer be able to open ProductListModule because angular will think the path is already "cached"

Aluan Haddad Over a year ago

Indeed, I didn't think of that, You're absolutely right.

Marcus Over a year ago

Thank you @AluanHaddad, I hoped I wouldn't have to go that way, but it works :)

Aluan Haddad Over a year ago

@Marcus did you mean to address your comment to @Andrei?

Collectives™ on Stack Overflow

Angular routing based on http call

Problem 1

Problem 2

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Problem 1

Problem 2

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related