diff --git a/src/themes/custom/eager-theme.module.ts b/src/themes/custom/eager-theme.module.ts new file mode 100644 index 0000000000..f226e60722 --- /dev/null +++ b/src/themes/custom/eager-theme.module.ts @@ -0,0 +1,56 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { SharedModule } from '../../app/shared/shared.module'; +import { HomeNewsComponent } from './app/home-page/home-news/home-news.component'; +import { NavbarComponent } from './app/navbar/navbar.component'; +import { HeaderComponent } from './app/header/header.component'; +import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component'; +import { SearchModule } from '../../app/shared/search/search.module'; +import { RootModule } from '../../app/root.module'; +import { NavbarModule } from '../../app/navbar/navbar.module'; +import { PublicationComponent } from './app/item-page/simple/item-types/publication/publication.component'; +import { ItemPageModule } from '../../app/item-page/item-page.module'; + +/** + * Add components that use a custom decorator to ENTRY_COMPONENTS as well as DECLARATIONS. + * This will ensure that decorator gets picked up when the app loads + */ +const ENTRY_COMPONENTS = [ + PublicationComponent, +]; + +const DECLARATIONS = [ + ...ENTRY_COMPONENTS, + HomeNewsComponent, + HeaderComponent, + HeaderNavbarWrapperComponent, + NavbarComponent, +]; + +@NgModule({ + imports: [ + CommonModule, + SharedModule, + SearchModule, + FormsModule, + RootModule, + NavbarModule, + ItemPageModule, + ], + declarations: DECLARATIONS, + providers: [ + ...ENTRY_COMPONENTS.map((component) => ({ provide: component })) + ], +}) +/** + * This module is included in the main bundle that gets downloaded at first page load. So it should + * contain only the themed components that have to be available immediately for the first page load, + * and the minimal set of imports required to make them work. Anything you can cut from it will make + * the initial page load faster, but may cause the page to flicker as components that were already + * rendered server side need to be lazy-loaded again client side + * + * Themed EntryComponents should also be added here + */ +export class EagerThemeModule { +} diff --git a/src/themes/custom/entry-components.ts b/src/themes/custom/entry-components.ts deleted file mode 100644 index b518e4cc45..0000000000 --- a/src/themes/custom/entry-components.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { PublicationComponent } from './app/item-page/simple/item-types/publication/publication.component'; - -export const ENTRY_COMPONENTS = [ - PublicationComponent -]; diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/lazy-theme.module.ts similarity index 91% rename from src/themes/custom/theme.module.ts rename to src/themes/custom/lazy-theme.module.ts index 453f366b28..07464cda2a 100644 --- a/src/themes/custom/theme.module.ts +++ b/src/themes/custom/lazy-theme.module.ts @@ -28,20 +28,28 @@ import { StatisticsModule } from '../../app/statistics/statistics.module'; import { StoreModule } from '@ngrx/store'; import { StoreRouterConnectingModule } from '@ngrx/router-store'; import { TranslateModule } from '@ngx-translate/core'; -import { HomeNewsComponent } from './app/home-page/home-news/home-news.component'; -import { HomePageComponent } from './app/home-page/home-page.component'; import { HomePageModule } from '../../app/home-page/home-page.module'; -import { RootComponent } from './app/root/root.component'; import { AppModule } from '../../app/app.module'; -import { PublicationComponent } from './app/item-page/simple/item-types/publication/publication.component'; import { ItemPageModule } from '../../app/item-page/item-page.module'; import { RouterModule } from '@angular/router'; -import { AccessControlModule } from '../../app/access-control/access-control.module'; +import { CommunityListPageModule } from '../../app/community-list-page/community-list-page.module'; +import { InfoModule } from '../../app/info/info.module'; +import { StatisticsPageModule } from '../../app/statistics-page/statistics-page.module'; +import { CommunityPageModule } from '../../app/community-page/community-page.module'; +import { CollectionPageModule } from '../../app/collection-page/collection-page.module'; +import { SubmissionModule } from '../../app/submission/submission.module'; +import { MyDSpacePageModule } from '../../app/my-dspace-page/my-dspace-page.module'; +import { SearchModule } from '../../app/shared/search/search.module'; +import { ResourcePoliciesModule } from '../../app/shared/resource-policies/resource-policies.module'; +import { ComcolModule } from '../../app/shared/comcol/comcol.module'; +import { RootModule } from '../../app/root.module'; +import { FileSectionComponent } from './app/item-page/simple/field-components/file-section/file-section.component'; +import { HomePageComponent } from './app/home-page/home-page.component'; +import { RootComponent } from './app/root/root.component'; import { BrowseBySwitcherComponent } from './app/browse-by/browse-by-switcher/browse-by-switcher.component'; import { CommunityListPageComponent } from './app/community-list-page/community-list-page.component'; -import { CommunityListPageModule } from '../../app/community-list-page/community-list-page.module'; import { SearchPageComponent } from './app/search-page/search-page.component'; -import { InfoModule } from '../../app/info/info.module'; +import { ConfigurationSearchPageComponent } from './app/search-page/configuration-search-page.component'; import { EndUserAgreementComponent } from './app/info/end-user-agreement/end-user-agreement.component'; import { PageNotFoundComponent } from './app/pagenotfound/pagenotfound.component'; import { ObjectNotFoundComponent } from './app/lookup-by-id/objectnotfound/objectnotfound.component'; @@ -49,14 +57,10 @@ import { ForbiddenComponent } from './app/forbidden/forbidden.component'; import { PrivacyComponent } from './app/info/privacy/privacy.component'; import { CollectionStatisticsPageComponent } from './app/statistics-page/collection-statistics-page/collection-statistics-page.component'; import { CommunityStatisticsPageComponent } from './app/statistics-page/community-statistics-page/community-statistics-page.component'; -import { StatisticsPageModule } from '../../app/statistics-page/statistics-page.module'; import { ItemStatisticsPageComponent } from './app/statistics-page/item-statistics-page/item-statistics-page.component'; import { SiteStatisticsPageComponent } from './app/statistics-page/site-statistics-page/site-statistics-page.component'; import { CommunityPageComponent } from './app/community-page/community-page.component'; import { CollectionPageComponent } from './app/collection-page/collection-page.component'; -import { CommunityPageModule } from '../../app/community-page/community-page.module'; -import { CollectionPageModule } from '../../app/collection-page/collection-page.module'; -import { ConfigurationSearchPageComponent } from './app/search-page/configuration-search-page.component'; import { ItemPageComponent } from './app/item-page/simple/item-page.component'; import { FullItemPageComponent } from './app/item-page/full/full-item-page.component'; import { LoginPageComponent } from './app/login-page/login-page.component'; @@ -66,32 +70,19 @@ import { ForgotEmailComponent } from './app/forgot-password/forgot-password-emai import { ForgotPasswordFormComponent } from './app/forgot-password/forgot-password-form/forgot-password-form.component'; import { ProfilePageComponent } from './app/profile-page/profile-page.component'; import { RegisterEmailComponent } from './app/register-page/register-email/register-email.component'; +import { MyDSpacePageComponent } from './app/my-dspace-page/my-dspace-page.component'; import { SubmissionEditComponent } from './app/submission/edit/submission-edit.component'; import { SubmissionImportExternalComponent } from './app/submission/import-external/submission-import-external.component'; import { SubmissionSubmitComponent } from './app/submission/submit/submission-submit.component'; -import { MyDSpacePageComponent } from './app/my-dspace-page/my-dspace-page.component'; -import { WorkflowItemSendBackComponent } from './app/workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component'; import { WorkflowItemDeleteComponent } from './app/workflowitems-edit-page/workflow-item-delete/workflow-item-delete.component'; -import { SubmissionModule } from '../../app/submission/submission.module'; -import { MyDSpacePageModule } from '../../app/my-dspace-page/my-dspace-page.module'; -import { NavbarComponent } from './app/navbar/navbar.component'; -import { HeaderComponent } from './app/header/header.component'; -import { FooterComponent } from './app/footer/footer.component'; +import { WorkflowItemSendBackComponent } from './app/workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component'; import { BreadcrumbsComponent } from './app/breadcrumbs/breadcrumbs.component'; -import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component'; -import { FileSectionComponent } from './app/item-page/simple/field-components/file-section/file-section.component'; -import { SearchModule } from '../../app/shared/search/search.module'; -import { ResourcePoliciesModule } from '../../app/shared/resource-policies/resource-policies.module'; -import { ComcolModule } from '../../app/shared/comcol/comcol.module'; import { FeedbackComponent } from './app/info/feedback/feedback.component'; -import { RootModule } from '../../app/root.module'; const DECLARATIONS = [ FileSectionComponent, HomePageComponent, - HomeNewsComponent, RootComponent, - PublicationComponent, BrowseBySwitcherComponent, CommunityListPageComponent, SearchPageComponent, @@ -122,17 +113,12 @@ const DECLARATIONS = [ SubmissionSubmitComponent, WorkflowItemDeleteComponent, WorkflowItemSendBackComponent, - FooterComponent, - HeaderComponent, - NavbarComponent, - HeaderNavbarWrapperComponent, BreadcrumbsComponent, - FeedbackComponent + FeedbackComponent, ]; @NgModule({ imports: [ - AccessControlModule, AdminRegistriesModule, AdminSearchModule, AdminWorkflowModuleModule, @@ -178,9 +164,9 @@ const DECLARATIONS = [ SearchModule, FormsModule, ResourcePoliciesModule, - ComcolModule + ComcolModule, ], - declarations: DECLARATIONS + declarations: DECLARATIONS, }) /** @@ -190,5 +176,5 @@ const DECLARATIONS = [ * It is purposefully not exported, it should never be imported anywhere else, its only purpose is * to give lazily loaded components a context in which they can be compiled successfully */ -class ThemeModule { +class LazyThemeModule { } diff --git a/src/themes/dspace/eager-theme.module.ts b/src/themes/dspace/eager-theme.module.ts index 3f043d32de..5dd114cd72 100644 --- a/src/themes/dspace/eager-theme.module.ts +++ b/src/themes/dspace/eager-theme.module.ts @@ -5,25 +5,24 @@ import { SharedModule } from '../../app/shared/shared.module'; import { HomeNewsComponent } from './app/home-page/home-news/home-news.component'; import { NavbarComponent } from './app/navbar/navbar.component'; import { HeaderComponent } from './app/header/header.component'; -import { - HeaderNavbarWrapperComponent -} from './app/header-nav-wrapper/header-navbar-wrapper.component'; +import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component'; import { SearchModule } from '../../app/shared/search/search.module'; import { RootModule } from '../../app/root.module'; import { NavbarModule } from '../../app/navbar/navbar.module'; /** - * Add components that use a custom decorator to ENTRY_COM&PONENTS as well as DECLARATIONS. This will - * ensure that decorator gets picked up when the app loads + * Add components that use a custom decorator to ENTRY_COMPONENTS as well as DECLARATIONS. + * This will ensure that decorator gets picked up when the app loads */ const ENTRY_COMPONENTS = [ ]; const DECLARATIONS = [ + ...ENTRY_COMPONENTS, HomeNewsComponent, HeaderComponent, HeaderNavbarWrapperComponent, - NavbarComponent + NavbarComponent, ]; @NgModule({ @@ -38,7 +37,7 @@ const DECLARATIONS = [ declarations: DECLARATIONS, providers: [ ...ENTRY_COMPONENTS.map((component) => ({ provide: component })) - ] + ], }) /** * This module is included in the main bundle that gets downloaded at first page load. So it should diff --git a/src/themes/dspace/lazy-theme.module.ts b/src/themes/dspace/lazy-theme.module.ts index c87a2b67a2..a4e8027a15 100644 --- a/src/themes/dspace/lazy-theme.module.ts +++ b/src/themes/dspace/lazy-theme.module.ts @@ -106,9 +106,9 @@ const DECLARATIONS = [ SearchModule, FormsModule, ResourcePoliciesModule, - ComcolModule + ComcolModule, ], - declarations: DECLARATIONS + declarations: DECLARATIONS, }) /** diff --git a/src/themes/eager-themes.module.ts b/src/themes/eager-themes.module.ts index 7af4a0edc6..4a46595f35 100644 --- a/src/themes/eager-themes.module.ts +++ b/src/themes/eager-themes.module.ts @@ -1,14 +1,18 @@ import { NgModule } from '@angular/core'; import { EagerThemeModule as DSpaceEagerThemeModule } from './dspace/eager-theme.module'; +// import { EagerThemeModule as CustomEagerThemeModule } from './custom/eager-theme.module'; /** - * This module only serves to ensure themed entry components are discoverable. It's kept separate - * from the theme modules to ensure only the minimal number of theme components is loaded ahead of - * time + * This module bundles the eager theme modules for all available themes. + * Eager modules contain components that are present on every page (to speed up initial loading) + * and entry components (to ensure their decorators get picked up). + * + * Themes that aren't in use should not be imported here so they don't take up unnecessary space in the main bundle. */ @NgModule({ imports: [ - DSpaceEagerThemeModule + DSpaceEagerThemeModule, + // CustomEagerThemeModule, ], }) export class EagerThemesModule {