Repository: angular/angular
File: devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.ts (TypeScript)

Code before:
    });
  }

  togglePathSettings(): void {
    this.searchInput().nativeElement.value = '';
    this.searchMatches = new Set();
    this.showFullPath.update((v) => !v);
  }

  viewSourceFromRouter(className: string, type: string): void {
    const data = this.selectedRoute()?.data;
    // Check if the selected route is a lazy loaded route or a redirecting route.
    // These routes have no component associated with them.
    if (data?.isLazy || data?.isRedirect) {
      const message = 'Cannot view source for lazy loaded routes or redirecting routes.';
      this.snackBar.open(message, 'Dismiss', {duration: 5000, horizontalPosition: 'left'});
      return;
    }

    if (className === '[Function]') {
      const message =
        'Cannot view the source of redirect functions defined inline (arrow or anonymous).';
      this.snackBar.open(message, 'Dismiss', {duration: 5000, horizontalPosition: 'left'});
      return;
    }

    this.appOperations.viewSourceFromRouter(className, type, this.frameManager.selectedFrame()!);
  }

  viewComponentSource(component: string): void {
    const data = this.selectedRoute()?.data;
    // Check if the selected route is a lazy loaded route or a redirecting route.
    // These routes have no component associated with them.
    if (data?.isLazy || data?.isRedirect) {
      const message = 'Cannot view source for lazy loaded routes or redirecting routes.';
      this.snackBar.open(message, 'Dismiss', {duration: 5000, horizontalPosition: 'left'});
      return;
    }

    this.appOperations.viewSourceFromRouter(
      component,
      'component',
      this.frameManager.selectedFrame()!,
    );
  }

  viewFunctionSource(functionName: string, type: 'title' | 'redirectTo'): void {
    if (functionName === '[Function]') {
      const message =
        'Cannot view the source of redirect functions defined inline (arrow or anonymous).';
      this.snackBar.open(message, 'Dismiss', {duration: 5000, horizontalPosition: 'left'});

Review comment (refactor):
@AleksanderBodurri, I didn't realize we were using function names for this lookup. I wonder if we should consider refactoring this to use the index of the function (in the guard array or component array) or some other more stable identifier such that it can work with anonymous functions?

Code after:
    });
  }

  togglePathSettings(): void {
    this.searchInput().nativeElement.value = '';
    this.searchMatches = new Set();
    this.showFullPath.update((v) => !v);
  }

  viewSourceFromRouter(className: string, type: string): void {
    const data = this.selectedRoute()?.data;
    // Check if the selected route is a lazy loaded route or a redirecting route.
    // These routes have no component associated with them.
    if (data?.isLazy || data?.isRedirect) {
      const message = 'Cannot view source for lazy loaded routes or redirecting routes.';
      this.snackBar.open(message, 'Dismiss', {duration: 5000, horizontalPosition: 'left'});
      return;
    }

    if (className === '[Function]') {
      const message = 'Cannot view the source of functions defined inline (arrow or anonymous).';
      this.snackBar.open(message, 'Dismiss', {duration: 5000, horizontalPosition: 'left'});
      return;
    }

    this.appOperations.viewSourceFromRouter(className, type, this.frameManager.selectedFrame()!);
  }

  viewComponentSource(component: string): void {
    const data = this.selectedRoute()?.data;
    // Check if the selected route is a lazy loaded route or a redirecting route.
    // These routes have no component associated with them.
    if (data?.isLazy || data?.isRedirect) {
      const message = 'Cannot view source for lazy loaded routes or redirecting routes.';
      this.snackBar.open(message, 'Dismiss', {duration: 5000, horizontalPosition: 'left'});
      return;
    }

    this.appOperations.viewSourceFromRouter(
      component,
      'component',
      this.frameManager.selectedFrame()!,
    );
  }

  viewFunctionSource(functionName: string, type: 'title' | 'redirectTo'): void {
    if (functionName === '[Function]') {
      const message =
        'Cannot view the source of redirect functions defined inline (arrow or anonymous).';
      this.snackBar.open(message, 'Dismiss', {duration: 5000, horizontalPosition: 'left'});
      return;