라우터 트리 검사하기

Router Tree 탭에서는 애플리케이션의 라우팅 트리를 시각적으로 확인할 수 있습니다. 라우팅 규칙이 어떻게 중첩되어 있는지 살펴보고 특정 라우팅 규칙의 세부 정보를 확인할 수 있습니다.

라우팅 규칙 세부 정보 확인하기

트리에서 특정 라우팅 규칙을 선택하면 Angular DevTools가 오른쪽 사이드바에 프로퍼티를 표시합니다. 다음과 같은 정보가 포함됩니다:

• Path: 라우팅 규칙의 URL 경로입니다. 커스텀 URL 매처를 사용하는 라우팅 규칙이면 Matcher가 대신 표시됩니다.
• Component: 이 라우팅 규칙으로 렌더링하는 컴포넌트입니다. 리다이렉트 라우팅 규칙이면 Redirect to 대상이 대신 표시됩니다.
• Path Match: 설정된 경우 경로 일치 전략(prefix 또는 full)을 표시합니다.
• Data: 라우팅 규칙과 연결된 정적 데이터를 JSON 트리로 표시합니다.
• Resolvers: 라우팅 규칙의 리졸버를 키-값 쌍으로 표시합니다.
• Guards: 라우팅 규칙에 설정된 가드를 canActivate, canActivateChild, canDeactivate, canMatch 유형별로 묶어 표시합니다.
• Providers: 설정된 경우 라우팅 규칙 수준의 프로바이더를 표시합니다.
• Title: 설정된 경우 라우팅 규칙의 제목을 표시합니다.
• RunGuardsAndResolvers: 설정된 경우 가드와 리졸버의 재실행 전략을 표시합니다.
• Active: 현재 이 라우팅 규칙이 활성화되어 있는지 표시합니다.
• Auxiliary: 보조 라우팅 규칙인지 표시합니다(예: 이름이 지정된 아웃렛의 라우팅 규칙).
• Lazy: 지연 로딩하는 라우팅 규칙인지 표시합니다.

특정 라우팅 규칙으로 이동하기

DevTools에서 바로 내비게이션을 실행할 수 있습니다. 오른쪽 사이드바에서 라우팅 규칙의 상세 정보를 확인할 때 경로 문자열 옆의 Navigate 아이콘을 클릭하세요. Angular 라우터가 애플리케이션에서 해당 URL로 이동합니다.