jss-angular update to v14: deprecations

Sitecore · Jan 11, 2023 · 4959479 · 4959479
1 parent a814a1d
commit 4959479
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 29 deletions.
diff --git a/packages/sitecore-jss-angular/src/components/placeholder.component.ts b/packages/sitecore-jss-angular/src/components/placeholder.component.ts
@@ -3,7 +3,6 @@ import { isPlatformServer } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
-  ComponentFactoryResolver,
   ContentChild,
   DoCheck,
   ElementRef,
@@ -102,7 +101,6 @@ export class PlaceholderComponent implements OnInit, OnChanges, DoCheck, OnDestr
   }
 
   constructor(
-    private componentFactoryResolver: ComponentFactoryResolver,
     private differs: KeyValueDiffers,
     private componentFactory: JssComponentFactoryService,
     private changeDetectorRef: ChangeDetectorRef,
@@ -292,14 +290,9 @@ export class PlaceholderComponent implements OnInit, OnChanges, DoCheck, OnDestr
 
       rendering.componentImplementation = this.missingComponentComponent;
     }
-
-    const componentFactory =
-      rendering.componentFactory ||
-      this.componentFactoryResolver.resolveComponentFactory(rendering.componentImplementation);
-
     // apply the parent style attribute _ngcontent
     // work-around for https://github.com/angular/angular/issues/12215
-    const createdComponentRef = this.view.createComponent(componentFactory, index);
+    const createdComponentRef = this.view.createComponent(rendering.componentImplementation, {index: index});
     if (this.parentStyleAttribute) {
       this.renderer.setAttribute(
         createdComponentRef.location.nativeElement,

diff --git a/packages/sitecore-jss-angular/src/components/render-component.component.ts b/packages/sitecore-jss-angular/src/components/render-component.component.ts
@@ -1,6 +1,5 @@
 import {
   Component,
-  ComponentFactoryResolver,
   Inject,
   Input,
   KeyValueDiffer,
@@ -50,7 +49,6 @@ export class RenderComponentComponent implements OnChanges {
   }
 
   constructor(
-    private componentFactoryResolver: ComponentFactoryResolver,
     private differs: KeyValueDiffers,
     private componentFactory: JssComponentFactoryService,
     @Inject(PLACEHOLDER_MISSING_COMPONENT_COMPONENT)
@@ -116,11 +114,7 @@ export class RenderComponentComponent implements OnChanges {
         rendering.componentImplementation = this.missingComponentComponent;
       }
 
-      const componentFactory =
-        rendering.componentFactory ||
-        this.componentFactoryResolver.resolveComponentFactory(rendering.componentImplementation);
-
-      const componentInstance = this.view.createComponent(componentFactory, 0).instance;
+      const componentInstance = this.view.createComponent(rendering.componentImplementation).instance;
       componentInstance.rendering = rendering.componentDefinition;
       if (this._inputs) {
         this._setComponentInputs(componentInstance, this._inputs);

diff --git a/packages/sitecore-jss-angular/src/jss-component-factory.service.ts b/packages/sitecore-jss-angular/src/jss-component-factory.service.ts
@@ -1,16 +1,13 @@
 import {
-  ComponentFactory,
   Inject,
   Injectable,
   Injector,
   Type,
-  Compiler,
-  NgModuleFactory,
   createNgModuleRef,
 } from '@angular/core';
 import { LoadChildren } from '@angular/router';
 import { ComponentRendering, HtmlElementRendering } from '@sitecore-jss/sitecore-jss/layout';
-import { from, of } from 'rxjs';
+import { of } from 'rxjs';
 import { mergeMap, take } from 'rxjs/operators';
 import {
   ComponentNameAndModule,
@@ -30,8 +27,6 @@ export interface ComponentFactoryResult {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   componentImplementation?: Type<any>;
   componentDefinition: ComponentRendering | HtmlElementRendering;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  componentFactory?: ComponentFactory<any>;
   canActivate?:
     | JssCanActivate
     | Type<JssCanActivate>
@@ -47,7 +42,6 @@ export class JssComponentFactoryService {
 
   constructor(
     private injector: Injector,
-    private compiler: Compiler,
     @Inject(PLACEHOLDER_COMPONENTS) private components: ComponentNameAndType[],
     @Inject(PLACEHOLDER_LAZY_COMPONENTS) private lazyComponents: ComponentNameAndModule[]
   ) {
@@ -76,7 +70,7 @@ export class JssComponentFactoryService {
     const lazyComponent = this.lazyComponentMap.get(component.componentName);
 
     if (lazyComponent) {
-      return lazyComponent.loadChildren().then((lazyChild) => {
+      return this.processChildren(lazyComponent.loadChildren).then((lazyChild) => {
         let componentType = null;
         const moduleRef = createNgModuleRef(lazyChild, this.injector);
         const dynamicComponentType = moduleRef.injector.get(DYNAMIC_COMPONENT);
@@ -116,19 +110,20 @@ export class JssComponentFactoryService {
     });
   }
 
-  private loadModuleFactory(loadChildren: LoadChildren): Promise<NgModuleFactory<unknown>> {
-      return wrapIntoObservable(loadChildren())
+  private processChildren(loadChildren: LoadChildren): Promise<Type<unknown>> {
+    if (typeof loadChildren === 'string') {
+      return import(loadChildren).then(mod => mod.MODULE);
+    }
+    else {
+       return wrapIntoObservable(loadChildren())
         .pipe(
           mergeMap((t: any) => {
-            if (t instanceof NgModuleFactory) {
               return of(t);
-            } else {
-              return from(this.compiler.compileModuleAsync(t));
-            }
           }),
           take(1)
         )
         .toPromise();
+    }
   }
 
   getComponents(