Angular のルーティング定義を全て取得してパスの存在チェックをしてみる

Angular アプリを作っていて、ルーティング定義をまとめて知りたくなったので、調べ方を調べた。

• 参考 : typescript - How to list / output all routes in @Routes in my Angular2 App - Stack Overflow

@angular/router が提供する Router クラスより、config を参照すれば、全てのルーティング定義が見られることが分かったので、ココから path 情報を取得すれば、アプリ内の全ルーティング ≒ 全ページの URL が調べられる。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  /**
   * コンストラクタ
   * 
   * @param router Router
   */
  constructor(private router: Router) { }
  
  /** 初期表示時の処理 */
  public ngOnInit(): void {
    // 全パスを取得する : ルートを指定するため router.config に '/' を指定する
    const paths: string[] = this.getRoutes(this.router.config, '/');
    // コンソール出力する
    console.log(paths);
  }
  
  /**
   * ルーティング定義からパスを取得する
   * 
   * @param routes ルーティング定義の配列
   * @param parentPath 第1引数 routes までのパス
   * @return ルーティングのパスの配列
   */
  public getRoutes(routes: any[], parentPath: string): string[] {
    const paths = [];
    
    routes.forEach((route) => {
      const path = `${parentPath}${route.path}/`;
      
      // 子のルーティング定義があれば再帰呼び出しして分割代入する
      if(route.children) {
        paths.push(...this.outputRoute(route.children, path));
      }
      
      // 空文字のパスは大抵 redirectTo を設定しているモノなので無視する
      if(route.path === '') {
        return;
      }
      
      // console.log(path);
      paths.push(path);
    });
    
    return paths;
  }
}

拙作の Angular Utilities からルーティング定義を引っ張り出してみたところ、以下のようになった。

0: "/index/"
1: "/font-family-tester/"
2: "/csv-file-to-table/"
3: "/touch-friendly-dnd/"
4: "/multiple-diff/"
5: "/text-converter/add-line-number/"
6: "/text-converter/case-converter/"
7: "/text-converter/normalize-to-nfc/"
8: "/text-converter/"
9: "/dynamic-generate-form/"
10: "/calculator/"
11: "/beautifier/javascript/"
12: "/beautifier/html/"
13: "/beautifier/css/"
14: "/beautifier/"
15: "/regexp/"
16: "/colour-converter/colour-converter/"
17: "/colour-converter/"
18: "/epoch-time-converter/"
19: "/encoder-decoder/"
20: "/detect-character/"
21: "/date-time-countdown/"
22: "/draw-triangle-svg/"
23: "/guitar-scale-generator/"

コレで求めていたモノは拾えた。

パスの存在チェックとかがしたければ、この配列から filter() とかすれば良いだろう。