Page History

...

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

   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.

Debugging which theme is being used

While you are working on themes, sometimes you may discover that it's difficult to tell which theme is being used to generate specific HTML elements. Luckily, there's an easy way to determine which theme is used on every HTML element.

Simply view the HTML source of the page, and look for the "data-used-theme" attribute.  This attribute will tell you which named theme matched that HTML element.  By default, a name of "base" references the core or "base" code ( under ./src/app) was used.

For example:

<!-- This example shows the theme named "dspace" was used for the "themed-header-navbar-wrapper.component.ts" -->
<ds-themed-header-navbar-wrapper ... data-used-theme="dspace"></ds-themed-header-navabar-wrapper>

<main>
	<!-- But, on the same page, the theme named "base" (core code) was used for the "themed-breadcrumbs.component.ts" -->
    <ds-themed-breadcrumbs ... data-used-theme="base"></ds-themed-breadcrumbs>
</main>

Additional Theming Resources

...