angular-lazy-load

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.

What I'm writing below is a short excerpt from Angular's Style Guide and will help you decide which your Lazy Loading Strategy.

The basic idea behind Lazy Loading modules in Angular is to load a module only if it's required. The ideal way of implementing it is to create different modules. Now, there would generally be these types of modules in your Angular App:

1. App/Main/Root Module - This would be the orchestrator of your Angular App. All the modules, required to initially load your Angular App would reside in this module.
2. Shared Module - This module will contain all the components/pipes/directives etc, that would be used by other modules in your Angular App.
3. Core Module - This module will contain all the single-use components/pipes/directives/services etc. Also, this modules should be imported only once, and that too, inside your App/Main/Root Module.
4. Utility Modules - Ideally there should be a module for any specific third-party feature that you're using. This helps to keep the App/Main/Root Module clean. So ideally, if you're using Angular Material for eg, then you should create a module for that that imports all the modules for all the components, that you'd be using in your Angular App, and then export it, from this module, so that any module, that wants to use Angular Material Components, could import it and use it.
5. Feature Modules - These are the modules that should ideally be lazy loaded. An Angular App should ideally be broken down into logically separated features and each of these modules should comprise of one such logically separated feature. This allows us to then lazy load them.

Keeping all these points in mind, you should break your Angular App down in this way so that it's clear which modules are Feature Modules and can be lazy loaded.

Before removing the script tag and the container DOM node, you can use unmountComponentAtNode to allow React to do its cleanup.