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 in your theme's lazy-theme.module.ts file.  Add an import of the new component file, or copy the corresponding import from "src/themes/custom/lazy-theme.module.ts".  For example, the Footer Component import would look like this:

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

   
   

3. 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" 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, .... ];

   
   

4. 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.
5. Now, you can customize your newly added Component by following the "Customizing Other Components in your Theme" instructions above.

...

1. First you MUST remove all references to that directory/component from your theme's lazy-theme.module.ts file. 

   1. For example, to delete the "./app/login-page" directory, you'd want to find which component(s) use that directory in your lazy-theme.module.ts file. 

   2. If you search that file, you'd fine this reference:

      Code Block
      import { LoginPageComponent } from './app/login-page/login-page.component';

      
      

   3. That means you not only need to remove that "import" statement.  You'd also need to remove all other references to "LoginPageComponent" in that same lazy-theme.module.ts file. So, you'd also need to remove it from the DECLARATIONS section: 

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

      
      

2. Finally, delete the directory in question from your theme.
3. At this point, you should rebuild/restart your UI to verify nothing has broken.  If you did everything correctly, no build errors will occur.
   1. If you failed to edit your lazy-theme.module.ts correctly, you may see "Cannot find module [path-to-module]" errors which reference the directories that Angular/Node can no longer find in your theme.  Either restore those directories, or remove the reference(s) from the lazy-theme.module.ts similar to step 1 above.

Additional Theming Resources

...