Dynamic paths in angular routing

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?