perf: shell module as standalone module (#568)

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/app.component.html

@@ -8,7 +8,7 @@
   </div>
 
   <footer data-testing-id="section-footer">
-    <ish-footer *ishHasNotRole="'APP_B2B_OCI_USER'" [deviceType]="deviceType$ | async"></ish-footer>
+    <ish-footer [deviceType]="deviceType$ | async"></ish-footer>
   </footer>
 </div>
 

src/app/app.component.spec.ts

@@ -5,7 +5,6 @@ import { MockComponent } from 'ng-mocks';
 import { instance, mock } from 'ts-mockito';
 
 import { AppFacade } from 'ish-core/facades/app.facade';
-import { RoleToggleModule } from 'ish-core/role-toggle.module';
 import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
 import { CookiesBannerComponent } from 'ish-shell/application/cookies-banner/cookies-banner.component';
 
@@ -28,7 +27,7 @@ describe('App Component', () => {
         MockComponent(FooterComponent),
         MockComponent(HeaderComponent),
       ],
-      imports: [RoleToggleModule.forTesting(), RouterTestingModule, TranslateModule.forRoot()],
+      imports: [RouterTestingModule, TranslateModule.forRoot()],
       providers: [{ provide: AppFacade, useFactory: () => instance(mock(AppFacade)) }],
     }).compileComponents();
   });

src/app/core/core.module.ts

@@ -18,7 +18,6 @@ import { MockInterceptor } from './interceptors/mock.interceptor';
 import { InternationalizationModule } from './internationalization.module';
 import { StateManagementModule } from './state-management.module';
 import { DefaultErrorhandler } from './utils/default-error-handler';
-import { ModuleLoaderService } from './utils/module-loader/module-loader.service';
 
 @NgModule({
   imports: [
@@ -52,10 +51,9 @@ import { ModuleLoaderService } from './utils/module-loader/module-loader.service
   exports: [TranslateModule],
 })
 export class CoreModule {
-  constructor(@Optional() @SkipSelf() parentModule: CoreModule, moduleLoader: ModuleLoaderService) {
+  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
     if (parentModule) {
       throw new Error('CoreModule is already loaded. Import it in the AppModule only');
     }
-    moduleLoader.init();
   }
 }

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/core/utils/module-loader/module-loader.service.ts

@@ -16,33 +16,28 @@ export const LAZY_FEATURE_MODULE = new InjectionToken<LazyModuleType>('lazyModul
 export class ModuleLoaderService {
   private loadedModules: string[] = [];
 
-  constructor(
-    private compiler: Compiler,
-    private injector: Injector,
-    private featureToggleService: FeatureToggleService,
-    private store: Store
-  ) {}
-
-  init() {
+  constructor(private compiler: Compiler, private featureToggleService: FeatureToggleService, private store: Store) {}
+
+  init(injector: Injector) {
     this.store.pipe(select(getFeatures), whenTruthy()).subscribe(() => {
-      const lazyModules = this.injector.get<LazyModuleType[]>(LAZY_FEATURE_MODULE, []);
+      const lazyModules = injector.get<LazyModuleType[]>(LAZY_FEATURE_MODULE, []);
       lazyModules
         .filter(mod => !this.loadedModules.includes(mod.feature))
         .filter(mod => this.featureToggleService.enabled(mod.feature))
         .forEach(async mod => {
-          await this.loadModule(mod.location);
+          await this.loadModule(mod.location, injector);
           this.loadedModules.push(mod.feature);
         });
     });
   }
 
-  private async loadModule(loc) {
+  private async loadModule(loc, injector: Injector) {
     const loaded = await loc;
     Object.keys(loaded)
       .filter(key => key.endsWith('Module'))
       .forEach(async key => {
         const moduleFactory = await this.loadModuleFactory(loaded[key]);
-        moduleFactory.create(this.injector);
+        moduleFactory.create(injector);
       });
   }
 

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.html → src/app/shared/components/search/search-box/search-box.component.html

@@ -1,8 +1,7 @@
-<form role="search" class="search clearfix" name="SearchBox_Header" (submit)="submitSearch(searchInput.value)">
+<div role="search" class="search clearfix">
   <input
     #searchInput
     [placeholder]="configuration?.placeholder || ''"
-    formControlName="search"
     autocomplete="off"
     type="text"
     class="form-control searchTerm"
@@ -15,6 +14,7 @@
     (keydown.arrowright)="selectSuggestedTerm(-1)"
     (keydown.arrowdown)="selectSuggestedTerm(activeIndex + 1)"
     (keydown.arrowup)="selectSuggestedTerm(activeIndex - 1)"
+    (keydown.enter)="submitSearch(searchInput.value)"
   />
 
   <div class="buttons">
@@ -35,6 +35,7 @@
       type="submit"
       name="search"
       [title]="'search.searchbox.button.title' | translate"
+      (click)="submitSearch(searchInput.value)"
     >
       <!-- search button with icon -->
       <ng-container *ngIf="!configuration?.buttonText; else textBlock">
@@ -61,4 +62,4 @@
       </li>
     </ul>
   </ng-container>
-</form>
+</div>

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

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { Injector, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import {
@@ -15,11 +15,19 @@ 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 { ModuleLoaderService } from 'ish-core/utils/module-loader/module-loader.service';
+
+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';
@@ -112,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,
   FormlyModule,
@@ -132,13 +143,17 @@ const importExportModules = [
   NgbDropdownModule,
   NgbModalModule,
   NgbPopoverModule,
+  OrderTemplatesExportsModule,
   PipesModule,
+  PunchoutExportsModule,
+  QuotingExportsModule,
   ReactiveFormsModule,
   RoleToggleModule,
   RouterModule,
-  ShellModule,
   SwiperModule,
+  TactonExportsModule,
   TranslateModule,
+  WishlistsExportsModule,
 ];
 
 const declaredComponents = [
@@ -236,6 +251,7 @@ const exportedComponents = [
   PromotionDetailsComponent,
   PromotionRemoveComponent,
   RecentlyViewedComponent,
+  SearchBoxComponent,
   SuccessMessageComponent,
 ];
 
@@ -244,4 +260,8 @@ const exportedComponents = [
   declarations: [...declaredComponents, ...exportedComponents],
   exports: [...exportedComponents, ...importExportModules],
 })
-export class SharedModule {}
+export class SharedModule {
+  constructor(moduleLoader: ModuleLoaderService, injector: Injector) {
+    moduleLoader.init(injector);
+  }
+}

src/app/shell/footer/footer/footer.component.html

@@ -1 +1,3 @@
-<div [ishServerHtml]="'footer.content' | translate: { appVersion: appVersion }" class="clearfix"></div>
+<ng-container *ishHasNotRole="'APP_B2B_OCI_USER'">
+  <div [ishServerHtml]="'footer.content' | translate: { appVersion: appVersion }" class="clearfix"></div>
+</ng-container>