Remove deprecated FactoryComponent API

In Angular 13, FactoryComponent and FactoryComponentResolver API got
deprecated. This commit removes the deprecated API in favor of other
APIs where Component classes can be used directly.

The affected classes are loading.service.ts and its spec file.

src/app/core/services/loading.service.ts

@@ -1,17 +1,7 @@
 import { DOCUMENT } from '@angular/common';
-import {
-  ComponentFactory,
-  ComponentFactoryResolver,
-  ComponentRef,
-  Inject,
-  Injectable,
-  Injector,
-  OnDestroy,
-  Renderer2,
-  ViewContainerRef
-} from '@angular/core';
+import { ComponentRef, Inject, Injectable, Injector, OnDestroy, Renderer2, ViewContainerRef } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
-import { MatProgressSpinnerDefaultOptions, MatSpinner, ProgressSpinnerMode } from '@angular/material/progress-spinner';
+import { MatProgressSpinnerDefaultOptions, MatProgressSpinner, ProgressSpinnerMode } from '@angular/material/progress-spinner';
 import { BehaviorSubject } from 'rxjs';
 import { pairwise } from 'rxjs/operators';
 
@@ -24,21 +14,14 @@ import { pairwise } from 'rxjs/operators';
 })
 export class LoadingService implements OnDestroy {
   private isLoading = new BehaviorSubject<boolean>(false);
-  readonly spinnerFactory: ComponentFactory<MatSpinner>;
-  spinnerContainerRef: ViewContainerRef | null = null;
-  spinnerComponentRef: ComponentRef<MatSpinner> | null = null;
+  spinnerComponentRef: ComponentRef<MatProgressSpinner> | null = null;
 
   private animationMode: ProgressSpinnerMode = 'indeterminate';
   private options?: MatProgressSpinnerDefaultOptions;
   private spinnerTheme: ThemePalette = 'primary';
   private classList: string[] = [];
 
-  constructor(
-    readonly componentFactoryResolver: ComponentFactoryResolver,
-    readonly injector: Injector,
-    @Inject(DOCUMENT) private document: Document
-  ) {
-    this.spinnerFactory = this.componentFactoryResolver.resolveComponentFactory(MatSpinner);
+  constructor(public spinnerContainerRef: ViewContainerRef, readonly injector: Injector, @Inject(DOCUMENT) private document: Document) {
     // Subscribe to changes
     this.isLoading
       .pipe(pairwise())
@@ -157,7 +140,7 @@ export class LoadingService implements OnDestroy {
 
   // Creates and formats the spinner to the specification provided
   private createSpinner(injector: Injector) {
-    const spinnerRef = this.spinnerFactory.create(injector);
+    const spinnerRef = this.spinnerContainerRef.createComponent(MatProgressSpinner, { injector });
     if (this.options) {
       spinnerRef.instance.diameter = this.options.diameter;
       spinnerRef.instance.strokeWidth = this.options.strokeWidth;

tests/helper/mock.view.container.ref.ts

@@ -1,4 +1,14 @@
-import { ComponentRef, ElementRef, EmbeddedViewRef, Injector, TemplateRef, ViewContainerRef, ViewRef } from '@angular/core';
+import {
+  ComponentRef,
+  ElementRef,
+  EmbeddedViewRef,
+  Injector,
+  NgModuleRef,
+  TemplateRef,
+  Type,
+  ViewContainerRef,
+  ViewRef
+} from '@angular/core';
 
 export class MockViewContainerRef implements ViewContainerRef {
   element: ElementRef;
@@ -16,8 +26,7 @@ export class MockViewContainerRef implements ViewContainerRef {
     return null as any;
   }
 
-  createComponent<C>(componentFactory: any, index?: number, injector?: any, projectableNodes?: any[], ngModuleRef?: any): ComponentRef<C> {
-    // Implement the required method with a fake return value or logic.
+  createComponent<C>(componentType: any, options?: any): ComponentRef<C> {
     return null as any;
   }
 

tests/services/loading.service.spec.ts

@@ -1,7 +1,7 @@
 import { DOCUMENT } from '@angular/common';
-import { ComponentFactory, ComponentFactoryResolver, ComponentRef, ElementRef, Injector, Renderer2, ViewContainerRef } from '@angular/core';
+import { ComponentRef, ElementRef, Injector, Renderer2, ViewContainerRef } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
-import { MatSpinner } from '@angular/material/progress-spinner';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { LoadingService } from '../../src/app/core/services/loading.service';
 import { MockMatSpinner } from '../helper/mock.mat.spinner';
 import { MockViewContainerRef } from '../helper/mock.view.container.ref';
@@ -11,11 +11,9 @@ describe('LoadingService', () => {
   let mockRenderer: jasmine.SpyObj<Renderer2>;
   let mockComponentInjector: jasmine.SpyObj<Injector>;
   let elementRef: ElementRef;
-  let mockComponentRef: ComponentRef<MatSpinner>;
+  let mockComponentRef: ComponentRef<MatProgressSpinner>;
   let mockInjector: jasmine.SpyObj<Injector>;
   let loadingService: LoadingService;
-  let mockComponentFactory: jasmine.SpyObj<ComponentFactory<MatSpinner>>;
-  let mockComponentFactoryResolver: jasmine.SpyObj<ComponentFactoryResolver>;
   let mockViewContainerRef: MockViewContainerRef;
   let document: Document;
 
@@ -58,27 +56,21 @@ describe('LoadingService', () => {
       injector: mockComponentInjector,
       onDestroy: null as any,
       destroy: () => {},
-      componentType: MatSpinner
-    } as unknown) as ComponentRef<MatSpinner>;
+      componentType: MatProgressSpinner
+    } as unknown) as ComponentRef<MatProgressSpinner>;
 
-    mockComponentFactory = jasmine.createSpyObj<ComponentFactory<MatSpinner>>({
-      create: mockComponentRef
-    });
-
-    mockComponentFactoryResolver = jasmine.createSpyObj<ComponentFactoryResolver>({
-      resolveComponentFactory: mockComponentFactory
-    });
     mockInjector = jasmine.createSpyObj('Injector', {
       get: mockRenderer
     });
 
     mockViewContainerRef = new MockViewContainerRef(mockInjector);
+    spyOn(mockViewContainerRef, 'createComponent').and.returnValue(mockComponentRef);
 
     await TestBed.configureTestingModule({
       providers: [
-        { provide: ComponentFactoryResolver, useValue: mockComponentFactoryResolver },
+        { provide: ViewContainerRef, useValue: mockViewContainerRef },
         { provide: Injector, useValue: mockInjector },
-        { provide: MatSpinner, useClass: MockMatSpinner },
+        { provide: MatProgressSpinner, useClass: MockMatSpinner },
         LoadingService
       ]
     }).compileComponents();