[AF-281] Unregistered template warning

packages/ng-diagram/projects/ng-diagram/src/lib/components/diagram/ng-diagram.component.ts

@@ -32,6 +32,7 @@ import { ZoomingPointerDirective } from '../../directives/input-events/zooming/z
 import { ZoomingWheelDirective } from '../../directives/input-events/zooming/zooming-wheel.directive';
 import { NgDiagramServicesAvailabilityCheckerDirective } from '../../directives/services-availability-checker/ng-diagram-services-availability-checker.directive';
 import { FlowCoreProviderService, FlowResizeBatchProcessorService, RendererService } from '../../services';
+import { TemplateProviderService } from '../../services/template-provider/template-provider.service';
 import { NgDiagramConfig, NgDiagramEdgeTemplateMap, NgDiagramNodeTemplateMap } from '../../types';
 import { BUILTIN_MIDDLEWARES } from '../../utils/create-middlewares';
 import { NgDiagramCanvasComponent } from '../canvas/ng-diagram-canvas.component';
@@ -79,6 +80,7 @@ export class NgDiagramComponent implements OnInit, OnDestroy {
   private readonly flowCoreProvider = inject(FlowCoreProviderService);
   private readonly renderer = inject(RendererService);
   private readonly flowResizeBatchProcessor = inject(FlowResizeBatchProcessorService);
+  private readonly templateProviderService = inject(TemplateProviderService);
 
   private initializedModel: ModelAdapter | null = null;
   private resizeObserver: ResizeObserver | null = null;
@@ -155,6 +157,16 @@ export class NgDiagramComponent implements OnInit, OnDestroy {
         this.setupEventBridge();
       }
     });
+
+    effect(() => {
+      const nodeTemplateMap = this.nodeTemplateMap();
+      this.templateProviderService.setNodeTemplateMap(nodeTemplateMap);
+    });
+
+    effect(() => {
+      const edgeTemplateMap = this.edgeTemplateMap();
+      this.templateProviderService.setEdgeTemplateMap(edgeTemplateMap);
+    });
   }
 
   /** @ignore */
@@ -199,14 +211,11 @@ export class NgDiagramComponent implements OnInit, OnDestroy {
    * @throws This method does not throw exceptions - it handles all edge cases gracefully
    */
   getNodeTemplate(nodeType: Node['type']) {
-    return this.nodeTemplateMap().get(nodeType || '') ?? null;
+    return this.templateProviderService.getNodeTemplate(nodeType);
   }
 
   getEdgeTemplate(edgeType: Edge['type']) {
-    if (!edgeType) {
-      return null;
-    }
-    return this.edgeTemplateMap().get(edgeType) ?? null;
+    return this.templateProviderService.getEdgeTemplate(edgeType);
   }
 
   isGroup(node: Node) {

packages/ng-diagram/projects/ng-diagram/src/lib/providers/ng-diagram.providers.ts

@@ -15,6 +15,7 @@ import { LinkingEventService } from '../services/input-events/linking-event.serv
 import { ManualLinkingService } from '../services/input-events/manual-linking.service';
 import { PaletteService } from '../services/palette/palette.service';
 import { RendererService } from '../services/renderer/renderer.service';
+import { TemplateProviderService } from '../services/template-provider/template-provider.service';
 import { UpdatePortsService } from '../services/update-ports/update-ports.service';
 
 /**
@@ -61,5 +62,6 @@ export function provideNgDiagram(): Provider[] {
     NgDiagramGroupsService,
     LinkingEventService,
     ManualLinkingService,
+    TemplateProviderService,
   ];
 }

packages/ng-diagram/projects/ng-diagram/src/lib/services/template-provider/template-provider.service.ts

@@ -0,0 +1,54 @@
+import { inject, Injectable } from '@angular/core';
+import { Edge, Node } from '../../../public-api';
+import { NgDiagramEdgeTemplateMap, NgDiagramNodeTemplateMap } from '../../types';
+import { FlowCoreProviderService } from '../flow-core-provider/flow-core-provider.service';
+
+@Injectable()
+export class TemplateProviderService {
+  private flowConfig = inject(FlowCoreProviderService);
+  private nodeTemplateMap = new NgDiagramNodeTemplateMap();
+  private edgeTemplateMap = new NgDiagramEdgeTemplateMap();
+
+  private accessedNodeTypes = new Set<Node['type']>();
+  private accessedEdgeTypes = new Set<Edge['type']>();
+
+  setNodeTemplateMap(map: NgDiagramNodeTemplateMap): void {
+    this.accessedNodeTypes.clear();
+    this.nodeTemplateMap = map;
+  }
+
+  setEdgeTemplateMap(map: NgDiagramEdgeTemplateMap): void {
+    this.accessedEdgeTypes.clear();
+    this.edgeTemplateMap = map;
+  }
+
+  getNodeTemplate(nodeType: Node['type']) {
+    if (nodeType === undefined) {
+      return null;
+    }
+
+    const template = this.nodeTemplateMap.get(nodeType || '');
+
+    if (!template && !this.accessedNodeTypes.has(nodeType) && this.flowConfig.provide().config.debugMode) {
+      console.warn(`No template found for node type: '${nodeType}'`);
+      this.accessedNodeTypes.add(nodeType);
+    }
+
+    return template ?? null;
+  }
+
+  getEdgeTemplate(edgeType: Edge['type']) {
+    if (edgeType === undefined) {
+      return null;
+    }
+
+    const template = this.edgeTemplateMap.get(edgeType || '');
+
+    if (!template && !this.accessedEdgeTypes.has(edgeType) && this.flowConfig.provide().config.debugMode) {
+      console.warn(`No template found for edge type: '${edgeType}'`);
+      this.accessedEdgeTypes.add(edgeType);
+    }
+
+    return template ?? null;
+  }
+}