angular-lazy-load | 2kb lazy load module for angular | Frontend Framework library

Consider below,

You are lazy loading the ProductModule when the user visits /product. Therefore the user has to visit /products for the child routes to be activated

All child routes for the /product routes must have /product/path/to/route. For your case this will be /product/productdetail/1

To solve this you will have to change your router link to reflect this

If you are solely looking to dynamically change colors, font sizes etc.. you should reconsider making use of global theming.

Whereas if there are major layout differences you have several options:

1. Create a base component class
   • contains all the logic
   • Derive your other components from this component with different styling files.

Benifit of the solution above is that you can also use appropriate naming for the child components which would make the code/directive more readable. Instead of using numbers 1,2,3 you would have darkListComponent, lightListComponent etc..

1. Make use of ngClass:

   • You can still seperate your styling sheets by passing them to your styleUrls in your component.ts file. (styleUrls: ['theme1.scss','theme2.scss'])
   • Or you can declare all classes in one file for max styling reusability.

   my-component-style-1,my-component-style-2 { ...same styling }, my-component-style-2 { color: orange; }

Option 2 is closer to yours and you'd only have to update your template and styling sheet for it to work.