Page History

...

1. First, copy the Angular Component directory in question from the "Custom" theme folder (src/themes/custom) into your theme's folder. NOTE: at this time, not all components are theme-able. So, if it doesn't exist in the "Custom" theme folder, then it may not be possible to theme.
   1. For example, if you wanted to add the Footer Component to your theme, it can be found in the "Custom" theme at "src/themes/custom/app/footer". 
   2. Copy that entire folder into your theme folder, retaining the same relative path.  For example, to add the Footer Component, copy "src/themes/custom/app/footer" (and all contents) into "src/themes/[your-theme]/app/footer".

2. Now, you need to "register" that folder component in one of your theme's module files: lazy-theme.module.ts or eager-theme.module.ts. For performance it's best to put as many components into lazy-theme.module.ts as that means they'll only be downloaded if they're needed. Components in eager-theme.module.ts are included in the initial JS download for the app, so you should only add components there that are necessary on every page, such as the header and footer, these should be added to the DECLARATIONS array. You should also include components using one of our custom decorators (such as @listableObjectComponent), because those decorators need to be registered when the app starts to be able to be picked up. These should be added to the ENTRY_COMPONENTS array, which will both declare them as well as ensure they're loaded when the app starts.

3. file.  Add an import of the new component file, or copy the corresponding import from or copy the corresponding import from "src/themes/custom/lazy-theme.module.ts" or "src/themes/custom/lazyeager-theme.module.ts".   For  For example, the Footer Component import would look can be found in "src/themes/custom/eager-theme.module.ts" and looks like this:

   Code Block
   import { FooterComponent } from './app/footer/footer.component';

   
   

4. In that same "lazy-theme. module .ts" file, also add this imported component to the "DECLARATIONS" section.  (Again, you can optionally look in "src/themes/custom/lazy-theme.module.ts" the custom theme's module files to see how its done).  For example, the Footer Component would then be added to the list of DECLARATIONS (the order of the declarations list doesn't matter):

   Code Block
   const DECLARATIONS = [ ....  FooterComponent, .... ];

   Some components should also be included in the theme's eager-theme.module.ts

5. Eager components should be added to the DECLARATIONS array

Entry components should be added to the ENTRY_COMPONENTS array




6. At this point, you should rebuild/restart your UI to ensure nothing has broken.  If you did everything correctly, no build errors will occur.  Generally speaking, it's best to add Components one by one, rebuilding in between.
7. Now, you can customize your newly added Component by following the "Customizing Other Components in your Theme" instructions above.

...