perf: shell module as standalone module

schematics/src/extension/factory.ts

@@ -52,12 +52,12 @@ export function createExtension(options: Options): Rule {
       )}-exports.module`,
     };
 
-    const shellModuleOptions = {
-      module: `${projectRoot}/shell/shell.module.ts`,
+    const sharedModuleOptions = {
+      module: `${projectRoot}/shared/shared.module.ts`,
       ...moduleImportOptions,
     };
-    operations.push(addExportToNgModule(shellModuleOptions));
-    operations.push(addImportToNgModule(shellModuleOptions));
+    operations.push(addExportToNgModule(sharedModuleOptions));
+    operations.push(addImportToNgModule(sharedModuleOptions));
 
     const appModuleOptions = {
       module: `${projectRoot}/app.module.ts`,

schematics/src/extension/factory_spec.ts

@@ -20,7 +20,7 @@ describe('Extension Schematic', () => {
   let appTree: UnitTestTree;
   beforeEach(async () => {
     appTree = await createApplication(schematicRunner)
-      .pipe(createModule(schematicRunner, { name: 'shell' }), createAppLastRoutingModule(schematicRunner))
+      .pipe(createModule(schematicRunner, { name: 'shared' }), createAppLastRoutingModule(schematicRunner))
       .toPromise();
   });
 
@@ -73,12 +73,12 @@ describe('Extension Schematic', () => {
     `);
   });
 
-  it('should import and export extension exports in shell module', async () => {
+  it('should import and export extension exports in shared module', async () => {
     const options = { ...defaultOptions };
 
     const tree = await schematicRunner.runSchematicAsync('extension', options, appTree).toPromise();
-    const shellModuleContent = tree.readContent('/src/app/shell/shell.module.ts');
-    expect(shellModuleContent).toMatchInlineSnapshot(`
+    const sharedModuleContent = tree.readContent('/src/app/shared/shared.module.ts');
+    expect(sharedModuleContent).toMatchInlineSnapshot(`
       "import { NgModule } from '@angular/core';
       import { FooExportsModule } from '../extensions/foo/exports/foo-exports.module';
 
@@ -87,7 +87,7 @@ describe('Extension Schematic', () => {
         declarations: [],
         exports: [FooExportsModule]
       })
-      export class ShellModule { }
+      export class SharedModule { }
       "
     `);
   });

schematics/src/lazy-component/factory_spec.ts

@@ -21,7 +21,7 @@ describe('Lazy Component Schematic', () => {
   beforeEach(async () => {
     appTree = await createApplication(schematicRunner)
       .pipe(
-        createModule(schematicRunner, { name: 'shell' }),
+        createModule(schematicRunner, { name: 'shared' }),
         createAppLastRoutingModule(schematicRunner),
         switchMap(tree => schematicRunner.runSchematicAsync('extension', { ...defaultOptions, name: 'ext' }, tree)),
         switchMap(tree =>

schematics/src/store/factory_spec.ts

@@ -23,7 +23,7 @@ describe('Store Schematic', () => {
   beforeEach(async () => {
     appTree = await createApplication(schematicRunner)
       .pipe(
-        createModule(schematicRunner, { name: 'shell' }),
+        createModule(schematicRunner, { name: 'shared' }),
         createAppLastRoutingModule(schematicRunner),
         mergeMap(tree => schematicRunner.runSchematicAsync('extension', { name: 'feature', project: 'bar' }, tree)),
         copyFileFromPWA('src/app/core/store/core/core-store.module.ts'),

src/app/core/models/search-box-configuration/search-box-configuration.model.ts

@@ -0,0 +1,28 @@
+import { IconName } from '@fortawesome/fontawesome-common-types';
+
+export interface SearchBoxConfiguration {
+  /**
+   * text for search button on search box, icon is used if no text is provided
+   */
+  buttonText?: string;
+  /**
+   * placeholder text for search input field
+   */
+  placeholder?: string;
+  /**
+   * if autoSuggest is set to true auto suggestion is provided for search box, else no auto suggestion is provided
+   */
+  autoSuggest?: boolean;
+  /**
+   * configures the number of suggestions if auto suggestion is provided
+   */
+  maxAutoSuggests?: number;
+  /**
+   * configure search box icon
+   */
+  icon?: IconName;
+  /**
+   * show last search term as search box value
+   */
+  showLastSearchTerm?: boolean;
+}

src/app/core/pipes.module.ts

@@ -1,4 +1,4 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 
 import { AttributeToStringPipe } from './models/attribute/attribute.pipe';
 import { PricePipe } from './models/price/price.pipe';
@@ -28,11 +28,4 @@ const pipes = [
   declarations: [...pipes],
   exports: [...pipes],
 })
-export class PipesModule {
-  static forRoot(): ModuleWithProviders<PipesModule> {
-    return {
-      ngModule: PipesModule,
-      providers: [...pipes],
-    };
-  }
-}
+export class PipesModule {}

src/app/pages/error/error/error.component.spec.ts

@@ -8,7 +8,7 @@ import { instance, mock } from 'ts-mockito';
 import { ServerHtmlDirective } from 'ish-core/directives/server-html.directive';
 import { AppFacade } from 'ish-core/facades/app.facade';
 import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
-import { SearchBoxComponent } from 'ish-shell/header/search-box/search-box.component';
+import { SearchBoxComponent } from 'ish-shared/components/search/search-box/search-box.component';
 
 import { ErrorComponent } from './error.component';
 

src/app/pages/search/search-no-result/search-no-result.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
 
-import { SearchBoxComponent } from 'ish-shell/header/search-box/search-box.component';
+import { SearchBoxComponent } from 'ish-shared/components/search/search-box/search-box.component';
 
 import { SearchNoResultComponent } from './search-no-result.component';
 

src/app/shell/header/search-box/search-box.component.ts → src/app/shared/components/search/search-box/search-box.component.ts

@@ -5,34 +5,9 @@ import { Observable, ReplaySubject, Subject } from 'rxjs';
 import { map, take, takeUntil } from 'rxjs/operators';
 
 import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
+import { SearchBoxConfiguration } from 'ish-core/models/search-box-configuration/search-box-configuration.model';
 import { SuggestTerm } from 'ish-core/models/suggest-term/suggest-term.model';
-
-interface SearchBoxConfiguration {
-  /**
-   * text for search button on search box, icon is used if no text is provided
-   */
-  buttonText?: string;
-  /**
-   * placeholder text for search input field
-   */
-  placeholder?: string;
-  /**
-   * if autoSuggest is set to true auto suggestion is provided for search box, else no auto suggestion is provided
-   */
-  autoSuggest?: boolean;
-  /**
-   * configures the number of suggestions if auto suggestion is provided
-   */
-  maxAutoSuggests?: number;
-  /**
-   * configure search box icon
-   */
-  icon?: IconName;
-  /**
-   * show last search term as search box value
-   */
-  showLastSearchTerm?: boolean;
-}
+import { GenerateLazyComponent } from 'ish-core/utils/module-loader/generate-lazy-component.decorator';
 
 /**
  * The search box container component
@@ -48,6 +23,7 @@ interface SearchBoxConfiguration {
   templateUrl: './search-box.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
+@GenerateLazyComponent()
 export class SearchBoxComponent implements OnInit, OnDestroy {
   /**
    * the search box configuration for this component

src/app/shared/shared.module.ts

@@ -16,11 +16,18 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { SwiperModule } from 'ngx-swiper-wrapper';
 
 import { AuthorizationToggleModule } from 'ish-core/authorization-toggle.module';
+import { DirectivesModule } from 'ish-core/directives.module';
 import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
 import { IconModule } from 'ish-core/icon.module';
 import { PipesModule } from 'ish-core/pipes.module';
 import { RoleToggleModule } from 'ish-core/role-toggle.module';
-import { ShellModule } from 'ish-shell/shell.module';
+
+import { CaptchaExportsModule } from '../extensions/captcha/exports/captcha-exports.module';
+import { OrderTemplatesExportsModule } from '../extensions/order-templates/exports/order-templates-exports.module';
+import { PunchoutExportsModule } from '../extensions/punchout/exports/punchout-exports.module';
+import { QuotingExportsModule } from '../extensions/quoting/exports/quoting-exports.module';
+import { TactonExportsModule } from '../extensions/tacton/exports/tacton-exports.module';
+import { WishlistsExportsModule } from '../extensions/wishlists/exports/wishlists-exports.module';
 
 import { CMSModule } from './cms/cms.module';
 import { CMSCarouselComponent } from './cms/components/cms-carousel/cms-carousel.component';
@@ -113,15 +120,18 @@ import { ProductVariationSelectComponent } from './components/product/product-va
 import { PromotionDetailsComponent } from './components/promotion/promotion-details/promotion-details.component';
 import { PromotionRemoveComponent } from './components/promotion/promotion-remove/promotion-remove.component';
 import { RecentlyViewedComponent } from './components/recently/recently-viewed/recently-viewed.component';
+import { SearchBoxComponent } from './components/search/search-box/search-box.component';
 import { FormlyAddressFormsModule } from './formly-address-forms/formly-address-forms.module';
 import { FormlyModule } from './formly/formly.module';
 import { FormsSharedModule } from './forms/forms.module';
 
 const importExportModules = [
   AuthorizationToggleModule,
   CMSModule,
+  CaptchaExportsModule,
   CommonModule,
   DeferLoadModule,
+  DirectivesModule,
   FeatureToggleModule,
   FormlyAddressFormsModule,
   FormlyBaseModule,
@@ -134,13 +144,17 @@ const importExportModules = [
   NgbDropdownModule,
   NgbModalModule,
   NgbPopoverModule,
+  OrderTemplatesExportsModule,
   PipesModule,
+  PunchoutExportsModule,
+  QuotingExportsModule,
   ReactiveFormsModule,
   RoleToggleModule,
   RouterModule,
-  ShellModule,
   SwiperModule,
+  TactonExportsModule,
   TranslateModule,
+  WishlistsExportsModule,
 ];
 
 const declaredComponents = [
@@ -238,6 +252,7 @@ const exportedComponents = [
   PromotionDetailsComponent,
   PromotionRemoveComponent,
   RecentlyViewedComponent,
+  SearchBoxComponent,
   SuccessMessageComponent,
 ];
 

src/app/shell/header/header-default/__snapshots__/header-default.component.spec.ts.snap

@@ -44,7 +44,7 @@ exports[`Header Default Component should render normal header adequately for des
     <div class="col-md-5 text-right"><ish-lazy-header-quickorder></ish-lazy-header-quickorder></div>
     <div class="col-md-4">
       <div class="search-container header-search-container">
-        <ish-search-box data-testing-id="search-box-desktop"></ish-search-box>
+        <ish-lazy-search-box data-testing-id="search-box-desktop"></ish-lazy-search-box>
       </div>
     </div>
   </div>
@@ -75,7 +75,7 @@ exports[`Header Default Component should render normal header adequately for mob
   <div class="header-utility">
     <a class="search-toggler active-search"
       ><div class="search-container header-search-container show" ng-reflect-collapsed="false">
-        <ish-search-box data-testing-id="search-box-desktop"></ish-search-box></div
+        <ish-lazy-search-box data-testing-id="search-box-desktop"></ish-lazy-search-box></div
     ></a>
     <div class="language-switch-container d-none d-md-block">
       <ish-language-switch data-testing-id="language-switch-desktop"></ish-language-switch>
@@ -169,7 +169,7 @@ exports[`Header Default Component should render normal header adequately for tab
     <div class="col-md-5 text-right"><ish-lazy-header-quickorder></ish-lazy-header-quickorder></div>
     <div class="col-md-4">
       <div class="search-container header-search-container">
-        <ish-search-box data-testing-id="search-box-desktop"></ish-search-box>
+        <ish-lazy-search-box data-testing-id="search-box-desktop"></ish-lazy-search-box>
       </div>
     </div>
   </div>
@@ -194,7 +194,7 @@ exports[`Header Default Component should render sticky header adequately for des
     <a class="search-toggler active-search"
       ><fa-icon class="header-icon" ng-reflect-icon="fas,search"></fa-icon>
       <div class="search-container header-search-container" ng-reflect-collapsed="false">
-        <ish-search-box data-testing-id="search-box-desktop"></ish-search-box></div
+        <ish-lazy-search-box data-testing-id="search-box-desktop"></ish-lazy-search-box></div
     ></a>
     <div class="language-switch-container d-none d-md-block"></div>
     <ish-login-status view="small" ng-reflect-view="small"></ish-login-status
@@ -248,7 +248,7 @@ exports[`Header Default Component should render sticky header adequately for mob
     <a class="search-toggler active-search"
       ><fa-icon class="header-icon" ng-reflect-icon="fas,search"></fa-icon>
       <div class="search-container header-search-container" ng-reflect-collapsed="false">
-        <ish-search-box data-testing-id="search-box-desktop"></ish-search-box></div
+        <ish-lazy-search-box data-testing-id="search-box-desktop"></ish-lazy-search-box></div
     ></a>
     <div class="language-switch-container d-none d-md-block"></div>
     <ish-login-status view="small" ng-reflect-view="small"></ish-login-status
@@ -302,7 +302,7 @@ exports[`Header Default Component should render sticky header adequately for tab
     <a class="search-toggler active-search"
       ><fa-icon class="header-icon" ng-reflect-icon="fas,search"></fa-icon>
       <div class="search-container header-search-container" ng-reflect-collapsed="false">
-        <ish-search-box data-testing-id="search-box-desktop"></ish-search-box></div
+        <ish-lazy-search-box data-testing-id="search-box-desktop"></ish-lazy-search-box></div
     ></a>
     <div class="language-switch-container d-none d-md-block"></div>
     <ish-login-status view="small" ng-reflect-view="small"></ish-login-status

src/app/shell/header/header-default/header-default.component.html

@@ -1,5 +1,5 @@
 <ng-template #searchBoxTemplate let-icon="icon">
-  <ish-search-box
+  <ish-lazy-search-box
     data-testing-id="search-box-desktop"
     [configuration]="{
       placeholder: 'search.searchbox.instructional_text' | translate,
@@ -8,7 +8,7 @@
       icon: icon,
       showLastSearchTerm: true
     }"
-  ></ish-search-box>
+  ></ish-lazy-search-box>
 </ng-template>
 
 <div class="header container" [ngClass]="deviceType">

src/app/shell/header/header-default/header-default.component.spec.ts

@@ -11,8 +11,8 @@ import { LanguageSwitchComponent } from 'ish-shell/header/language-switch/langua
 import { LoginStatusComponent } from 'ish-shell/header/login-status/login-status.component';
 import { MiniBasketComponent } from 'ish-shell/header/mini-basket/mini-basket.component';
 import { ProductCompareStatusComponent } from 'ish-shell/header/product-compare-status/product-compare-status.component';
-import { SearchBoxComponent } from 'ish-shell/header/search-box/search-box.component';
 import { UserInformationMobileComponent } from 'ish-shell/header/user-information-mobile/user-information-mobile.component';
+import { LazySearchBoxComponent } from 'ish-shell/shared/lazy-search-box/lazy-search-box.component';
 
 import { LazyHeaderQuickorderComponent } from '../../../extensions/quickorder/exports/lazy-header-quickorder/lazy-header-quickorder.component';
 import { LazyWishlistsLinkComponent } from '../../../extensions/wishlists/exports/lazy-wishlists-link/lazy-wishlists-link.component';
@@ -33,12 +33,12 @@ describe('Header Default Component', () => {
         MockComponent(HeaderNavigationComponent),
         MockComponent(LanguageSwitchComponent),
         MockComponent(LazyHeaderQuickorderComponent),
+        MockComponent(LazySearchBoxComponent),
         MockComponent(LazyWishlistsLinkComponent),
         MockComponent(LoginStatusComponent),
         MockComponent(MiniBasketComponent),
         MockComponent(NgbCollapse),
         MockComponent(ProductCompareStatusComponent),
-        MockComponent(SearchBoxComponent),
         MockComponent(UserInformationMobileComponent),
       ],
     }).compileComponents();
@@ -67,7 +67,7 @@ describe('Header Default Component', () => {
 
   it('should render Search Box on template', () => {
     fixture.detectChanges();
-    expect(findAllCustomElements(element)).toContain('ish-search-box');
+    expect(findAllCustomElements(element)).toContain('ish-lazy-search-box');
   });
 
   it('should render Header Navigation on template', () => {