Page History

...

1. Configure your theme to use its copies of files: Modify the corresponding *.component.ts in your theme. 
   1. If you want to modify component style, replace the "styleUrls" in that file to point at the copy of *.component.scss in your theme.
   2. If you want to modify component HTML, replace the "template" in that file to point at the copy of *.component.html in your theme.
2. Copy the default UI code into your theme file(s)
   1. If you want to modify component style, copy the default *.component.scss code (from src/app/) into your theme's component.scss file.
   2. If you want to modify component HTML, copy the default *.component.html code (from src/app/) into your theme's component.html file.
3. Modify those theme-specific files  
   1. If you want to add images, add them to your theme's assets/images folder.  Then reference them at the /assets/[theme-name]/images/ URL path.
   2. Keep in mind, all Bootstrap variables, utility classes & styles can be used in these files. Take advantage of Bootstrap when you can do so.
4. Remember to either rebuild the UI after each change, or run in dev mode (yarn start:dev) while you are doing theme work.

Removing subdirectories/components from your theme directory

Optionally, you may decide you want to keep your theme directory "simple" and only include components that you've modified. 

NOTE: It's NOT required to remove any directories out of your theme. For novice developers, it may be easier to simply keep all the directories, as it ensures they are always available, in case you wish to modify them at a later date.

To do so is a two step process:

1. First you MUST remove all references to that directory/component from your theme's  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 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 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 your theme to verify nothing has broken.  If you did everything correctly, no errors will occur.
   1. If you failed to edit your 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 theme.module.ts similar to step 1 above.

Additional Theming Resources

...