Fix null injector error in line grade pipe

Author: dorthrithil

client/package-lock.json

@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^19.2.2",
     "@angular/platform-browser-dynamic": "^19.2.2",
     "@angular/router": "^19.2.2",
-    "@jsverse/transloco": "^7.5.1",
+    "@jsverse/transloco": "^7.6.1",
     "@jsverse/transloco-keys-manager": "^6.1.0",
     "@ngneat/until-destroy": "^10.0.0",
     "@ngrx/effects": "^19.0.1",

client/package.json

@@ -4,7 +4,7 @@ import { Sector } from '../../../models/sector';
 import { MenuItem } from 'primeng/api';
 import { CragsService } from '../../../services/crud/crags.service';
 import { SectorsService } from '../../../services/crud/sectors.service';
-import { TranslocoService } from '@jsverse/transloco';
+import { TRANSLOCO_SCOPE, TranslocoService } from '@jsverse/transloco';
 import {
   ActivatedRoute,
   Router,
@@ -47,6 +47,7 @@ import { SetActiveTabDirective } from '../../shared/directives/set-active-tab.di
     RouterLink,
     RouterOutlet,
   ],
+  providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'area' }],
 })
 @UntilDestroy()
 export class AreaComponent implements OnInit {

client/src/app/modules/area/area.module.ts

@@ -11,7 +11,6 @@ import { BreadcrumbModule } from 'primeng/breadcrumb';
 import { EditorModule } from 'primeng/editor';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
 import { InputTextModule } from 'primeng/inputtext';
-import { AreaModule } from '../area/area.module';
 import { GradeDistributionBarChartComponent } from '../shared/components/grade-distribution-bar-chart/grade-distribution-bar-chart.component';
 import { ChipModule } from 'primeng/chip';
 import { CoordinatesComponent } from '../shared/forms/controls/coordinates/coordinates.component';
@@ -47,7 +46,6 @@ import { TopoDataviewSkeletonComponent } from '../shared/components/topo-datavie
     BreadcrumbModule,
     EditorModule,
     ConfirmPopupModule,
-    AreaModule,
     GradeDistributionBarChartComponent,
     ChipModule,
     CoordinatesComponent,

client/src/app/modules/area/area/area.component.ts

@@ -1,26 +1,52 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import { OnDestroy, Pipe, PipeTransform } from '@angular/core';
 import { Line } from '../../../models/line';
-import { AsyncPipe } from '@angular/common';
 import { ScalesService } from '../../../services/crud/scales.service';
-import { TranslateSpecialGradesPipe } from './translate-special-grades.pipe';
+import { TranslateSpecialGradesService } from '../../../services/core/translate-special-grades.service';
+import { Subscription } from 'rxjs';
 
 @Pipe({
   name: 'lineGrade',
   pure: false,
 })
-export class LineGradePipe implements PipeTransform {
+export class LineGradePipe implements PipeTransform, OnDestroy {
+  private subscription: Subscription | null = null;
+  private cachedResult: string | null = null;
+  private lastLine: Line | undefined;
+
   constructor(
+    private translateSpecialGradesService: TranslateSpecialGradesService,
     private scalesService: ScalesService,
-    private asyncPipe: AsyncPipe,
-    private translate: TranslateSpecialGradesPipe,
   ) {}
 
   transform(line?: Line): string {
-    const observable = this.scalesService.gradeNameByValue(
-      line?.type,
-      line?.gradeScale,
-      line?.gradeValue,
-    );
-    return this.translate.transform(this.asyncPipe.transform(observable));
+    if (line !== this.lastLine) {
+      this.lastLine = line;
+      this.cachedResult = null;
+
+      if (this.subscription) {
+        this.subscription.unsubscribe();
+      }
+
+      if (line) {
+        const observable = this.scalesService.gradeNameByValue(
+          line.type,
+          line.gradeScale,
+          line.gradeValue,
+        );
+
+        this.subscription = observable.subscribe((gradeName) => {
+          this.cachedResult =
+            this.translateSpecialGradesService.translate(gradeName);
+        });
+      }
+    }
+
+    return this.cachedResult || '';
+  }
+
+  ngOnDestroy(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
   }
 }

client/src/app/modules/sector/sector.module.ts

@@ -1,23 +1,16 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { TranslocoPipe } from '@jsverse/transloco';
-import { marker } from '@jsverse/transloco-keys-manager/marker';
+import { TranslateSpecialGradesService } from '../../../services/core/translate-special-grades.service';
 
 @Pipe({
   name: 'translateSpecialGrades',
+  standalone: true,
 })
-export class TranslateSpecialGradesPipe
-  extends TranslocoPipe
-  implements PipeTransform
-{
-  override transform(value: string): string {
-    const specialGrades: string[] = [
-      marker('CLOSED_PROJECT'),
-      marker('OPEN_PROJECT'),
-      marker('UNGRADED'),
-    ];
-    if (specialGrades.includes(value)) {
-      return super.transform(value);
-    }
-    return value;
+export class TranslateSpecialGradesPipe implements PipeTransform {
+  constructor(
+    private translateSpecialGradesService: TranslateSpecialGradesService,
+  ) {}
+
+  public transform(value: string): string {
+    return this.translateSpecialGradesService.translate(value);
   }
 }

client/src/app/modules/shared/pipes/line-grade.pipe.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { marker } from '@jsverse/transloco-keys-manager/marker';
+import { TranslocoService } from '@jsverse/transloco';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TranslateSpecialGradesService {
+  constructor(private translocoService: TranslocoService) {}
+
+  public translate(value: string): string {
+    const specialGrades: string[] = [
+      marker('CLOSED_PROJECT'),
+      marker('OPEN_PROJECT'),
+      marker('UNGRADED'),
+    ];
+    if (specialGrades.includes(value)) {
+      return this.translocoService.translate(value);
+    }
+    return value;
+  }
+}