Angular Dynamic URL in lazy loaded module

Question

I have page which renders content based on the params in the url, current route samples are given as follows,

domain.com/page/:pageId (domain.com/page/123456) renders Home Page
domain.com/page/:pageId (domain.com/page/567890) renders Offers Page
domain.com/page/:pageId (domain.com/page/987654) renders Blog Page

Now i want to implement SEO in my site , so my url will be..

domain.com/home renders Home Page
domain.com/offers (domain.com/page/567890) renders Offers Page
domain.com/blog (domain.com/page/987654) renders Blog Page

These pages come dynamically form server.

My Dynamic Route looks like,

 [  {"path": "home",
        "data": {
                "tile": "Landing Page",
                "pageId":"123456" 
        }
    },
    {"path": "offers",
        "data": {
                "tile": "Offers Page",
                "pageId":"567890" 
        }
    },
    {"path": "Bread",
        "data": {
                "tile": "Blog Page",
                "pageId":"987654" 
        }
    }

]

I have pushed my routes as

dynamicRoutes.forEach(route => {
    this.router.resetConfig([route, ...this.router.config]);
});

But the routes are not navigating and gives 404 error.

How do I go about doing this?

Your forEach keeps overwriting. I’d expect only the last dynamicRoute to actually work. this.router.resetConfig([…dynamicRoutes, ...this.router.config]); — MikeOne
– MikeOne, Commented Sep 4, 2021 at 17:05
Yes. But event in that case last route should work but it didn't. — Tom
– Tom, Commented Sep 6, 2021 at 8:33

Rohith V · Accepted Answer · 2021-09-08 05:51:25Z

1

I think you're looking for the redirectTo feature?

e.g.

[  {"path": "home",
       "data": {
                "tile": "Landing Page",
                "pageId":"123456" 
        },
       "redirectTo: '/page/123456'
    },
    {"path": "offers",
        "data": {
                "tile": "Offers Page",
                "pageId":"567890" 
        },
       "redirectTo: '/page/567890'
    },
    {"path": "Bread",
        "data": {
                "tile": "Blog Page",
                "pageId":"987654" 
        },
       "redirectTo: '/page/987654'
    }

]

edited Sep 8, 2021 at 5:51

Rohith V

1,1311 gold badge13 silver badges27 bronze badges

answered Sep 4, 2021 at 13:14

Robert Dempsey

4582 silver badges12 bronze badges

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

2 Comments

Rajesh Kumar Swain Over a year ago

Robert, Tom wants to implement SEO on his current dynamic site. So "redirectTo: '/page/123456' code again it will redirect to dynamic page. He wants url should be like this domain.com/home.

Tom Over a year ago

Yes , if i use redirectTO it will change the url

Collectives™ on Stack Overflow

Angular Dynamic URL in lazy loaded module

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related