There is a requirement to create couple of standalone pages in my Spartacus App which is not created via the CMS route, but these are Angular pages (with their routes in Angular). But these pages needs to have the Header and Footer like other CMS pages (PDP, PLP, etc). Is it possible to extend header and footer common components from the CMS pages to be used in the Angular pages?
The easiest way to do this, is to create an empty CMS page with a template containing the header and footers. The page it self doesn't need to have components, as you will hardcode these in angular directly.
The easiest approach would be to have a root route for those pages, for example "content":
The CMS content page should be configured with the /content, so that all those URLs will be backed with this CMS content page.
Additionally, you should configure an angular route in your app that matches those routes. You can use standard angular routing capabilities, including child routes. The later will likely avoid duplicated calls for the same CMS page (but that's from top-of-head).
An alternative approach is to use the cmsPageGuard, that needs a data object with a pageLabel. This offers to advantages, (1) decouple the storefront URL from the page label in CMS and (2) no need to use the "root route". The disadvantage is that the hardcoded data.pageLabel must correspond with the page.label in the CMS. Here's a snippet:
{
path: 'demo/static/page',
component: PageLayoutComponent,
data: { pageLabel: '/faq' },
canActivate: [CmsPageGuard],
}