Single-spa-router: Angular 9

Question

I want to add routing pages between header and footer. Header and Footer should not re render for every navigation.

Code for root-html-file -> index.html

<single-spa-router>
   <application name='header'> 
   </application>

   <route default>
   <application name='dashboard'>
   </application>
   </route>

   <route path='help'>
   <application name='help'>
   </application>
   </route>

   <application name='footer'> 
   </application>

</single-spa-router>

Once we navigate to default route 'localhost:4200/' it will render the header, dashboard and footer but after navigating to help, footer will disappear. Header and Route application will render.

Answer 1

Add Routing to the angular project and setup routes, You can then specify the router-outlet tag between Header and Footer to reload the content between Header and Footer based on the Route paths.

Check this out - http://www.angular.io/tutorial/toh-pt5