Could not load the live router state.
+ } @else if (loading()) { +Loading the live router state…
+ } @else if (page(); as current) { + @if (pages().length > 1) { + + } +No page is reporting router state yet. Open the app in a browser.
+ } + `, + styles: ` + :host { + display: grid; + gap: 12px; + margin-bottom: 28px; + } + .muted { + color: #a1a1aa; + font-size: 13px; + } + .page-pick { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + font-size: 13px; + color: #d4d4d8; + } + select { + max-width: 100%; + min-width: 0; + padding: 4px 8px; + background: #18181b; + border: 1px solid #52525b; + border-radius: 6px; + color: #e4e4e7; + } + .tabs { + display: flex; + flex-wrap: wrap; + gap: 4px; + border-bottom: 1px solid #27272a; + } + [role='tab'] { + padding: 6px 12px; + background: none; + border: none; + border-bottom: 2px solid transparent; + color: #a1a1aa; + cursor: pointer; + font-size: 13px; + } + [role='tab'][aria-selected='true'] { + color: #e4e4e7; + border-bottom-color: var(--accent); + } + [role='tab']:focus-visible, + select:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; + } + .count { + margin-left: 4px; + padding: 0 5px; + border-radius: 8px; + background: #7f1d1d; + color: #fecaca; + font-size: 11px; + } + `, +}) +export class LiveRoute { + rpc = input
+ {{ snapshot.url }}
+
+ The browser shows {{ snapshot.browserUrl }}, not the router URL (skipLocationChange, browserUrl, a failed navigation or code that
+ changed history).
+
{{ pending.url }} (#{{ pending.id }})
+
+ {{ message() }}
+ } +{{ snapshot.queryParams | json }}
+ {{ snapshot.fragment }}
+ | Route | +Component | +Params | +Data | +Guards and resolvers | +
|---|---|---|---|---|
|
+ {{ row.depth === 0 && !row.route.path ? '(root)' : '/' + row.route.path }}
+ @if (row.route.outlet !== 'primary') {
+ {{ row.route.outlet }}
+ }
+ @if (row.route.lazy) {
+ lazy
+ }
+ @if (row.route.title) {
+
+ title {{ row.route.title
+ }}{{ row.route.ownTitle === false ? ' (inherited)' : '' }}
+
+ }
+ |
+ {{ row.route.component ?? '—' }} | +
+ @for (entry of entries(row.route.params); track entry[0]) {
+
+
+ } @empty {
+ —
+ }
+ {{ entry[0] }}: {{ entry[1] | json }}
+ @if (row.route.paramSources?.[entry[0]] === 'inherited') {
+ inherited
+ }
+ |
+
+ @for (entry of entries(row.route.data); track entry[0]) {
+
+
+ } @empty {
+ —
+ }
+ {{ entry[0] }}: {{ entry[1] | json }}
+ @if (row.route.dataSources?.[entry[0]]; as source) {
+ {{ source }}
+ }
+ |
+ + @for (guard of guardList(row.route); track guard) { + {{ guard }} + } + @for (resolver of row.route.resolvers ?? []; track resolver) { + resolve {{ resolver }} + } + @if (!guardList(row.route).length && !row.route.resolvers) { + — + } + | +
{{ row.outlet.component ?? '?' }} for
+ {{ row.outlet.route ?? '?' }}
+ } @else {
+ not activated
+ }
+ @if (row.outlet.detached) {
+ detached by reuse strategy
+ }
+ @for (bound of boundInputs(row.outlet); track bound.input) {
+ input {{ bound.input }} ← {{ bound.source }}
+ }
+ This page reports no Router.
+ } + `, + styles: ` + ${SHARED_STYLES} + :host { + display: grid; + gap: 12px; + } + .url code { + font-size: 14px; + color: var(--accent); + } + .note { + margin: 0; + padding: 8px 10px; + border-left: 3px solid #fef08a; + background: #27272a; + color: #e4e4e7; + font-size: 13px; + } + .pending { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + font-size: 13px; + color: #fef08a; + } + .facts { + display: grid; + grid-template-columns: max-content 1fr; + gap: 4px 12px; + margin: 0; + font-size: 13px; + } + dt { + color: #a1a1aa; + } + dd { + margin: 0; + color: #e4e4e7; + } + .path { + font-family: monospace; + color: var(--accent); + white-space: nowrap; + } + .sub { + font-family: inherit; + color: #a1a1aa; + font-size: 12px; + white-space: normal; + } + .data { + max-width: 360px; + } + .outlets { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 6px; + font-size: 13px; + color: #e4e4e7; + } + `, +}) +export class RouteCurrent { + page = input.requiredChecking…
+ } @else if (findings().length) { +{{ finding.rule }}
+ {{ finding.route }}
+ {{ finding.message }}
++ Fix: {{ finding.fix }} + (Angular + {{ + finding.angular === 'throws' + ? 'throws' + : finding.angular === 'warns' + ? 'warns' + : 'does not warn' + }}) +
+No route config problems found.
+ } + `, + styles: ` + ${SHARED_STYLES} + :host { + display: grid; + gap: 10px; + } + .toolbar { + display: flex; + flex-wrap: wrap; + gap: 10px; + align-items: center; + } + .findings { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 8px; + } + .findings li { + padding: 10px; + border: 1px solid #27272a; + border-radius: 6px; + font-size: 13px; + color: #e4e4e7; + } + .head { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + } + .route { + color: var(--accent); + } + p { + margin: 6px 0 0; + } + .fix { + color: #d4d4d8; + } + `, +}) +export class RouteLint { + page = input.required+ Events-only mode: this build has no debug utils (production build or unusual setup), so + the route config, lint and actions are limited. +
+ } +{{ setup.baseHref }}
+ | Option | +Value | +Source | +
|---|---|---|
+ {{ option.name }}
+ |
+
+ {{ option.value }}
+ |
+ + {{ + option.set ? 'set' : 'default' + }} + | +
{{ strategy[1] }}
+ The page has not reported its router setup yet.
+ } + `, + styles: ` + ${SHARED_STYLES} + :host { + display: grid; + gap: 12px; + } + .note { + margin: 0; + padding: 8px 10px; + border-left: 3px solid #fef08a; + background: #27272a; + color: #e4e4e7; + font-size: 13px; + } + .facts { + display: grid; + grid-template-columns: max-content 1fr; + gap: 4px 12px; + margin: 0; + font-size: 13px; + } + dt { + color: #a1a1aa; + } + dd { + margin: 0; + color: #e4e4e7; + } + .chips { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin: 0; + padding: 0; + list-style: none; + } + `, +}) +export class RouteSetup { + page = input.required{{ message() }}
+ } + + @if (items().length) { + + } @else { ++ No navigations since DevTools connected; earlier ones are not visible. Click a link in the + app. +
+ } + `, + styles: ` + ${SHARED_STYLES} + :host { + display: grid; + gap: 10px; + } + .toolbar { + display: flex; + flex-wrap: wrap; + gap: 8px 14px; + align-items: center; + font-size: 13px; + color: #e4e4e7; + } + .check { + display: flex; + gap: 6px; + align-items: center; + } + .legend { + display: flex; + gap: 12px; + font-size: 12px; + color: #a1a1aa; + } + .legend i { + display: inline-block; + width: 10px; + height: 10px; + margin-right: 4px; + border-radius: 2px; + } + .navs { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 8px; + } + .navs > li { + padding: 10px; + border: 1px solid #27272a; + border-radius: 6px; + font-size: 13px; + } + .head { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + } + time { + color: #a1a1aa; + font-size: 12px; + } + .bar { + display: flex; + height: 6px; + margin: 8px 0 4px; + border-radius: 3px; + overflow: hidden; + background: #27272a; + } + .bar span { + display: block; + min-width: 2px; + } + .details { + display: grid; + grid-template-columns: max-content 1fr; + gap: 3px 12px; + margin: 6px 0 0; + font-size: 12px; + } + dt { + color: #a1a1aa; + } + dd { + margin: 0; + color: #e4e4e7; + overflow-wrap: anywhere; + } + .reason, + .bad { + color: #fecaca; + } + .actions { + display: flex; + gap: 8px; + margin-top: 8px; + } + `, +}) +export class RouteTimeline { + page = input.required{{ result.params | json }}
+ }
+ } @else {
+ Matches no route (NG04002).
+ @if (result.nearest.length) {
+ Nearest: {{ result.nearest.join(', ') }}
+ }
+ }
+ @for (note of result.notes; track note) {
+ {{ message() }}
+ } + + + @if (!page().config) { ++ {{ + page().setup?.mode === 'events-only' + ? 'This build has no debug utils, so the live config cannot be read.' + : 'The page has not reported its route config yet.' + }} +
+ } @else { ++ Generation {{ page().generation }} · {{ rows().length }} route(s). Lazy routes show their + children once loaded. +
+| Path | +Target | +Guards and resolvers | +Title | +Actions | +
|---|---|---|---|---|
| + {{ row.node.fullPath }} + @if (isActive(row.node)) { + active + } + @if (row.node.lazy) { + lazy {{ row.node.lazy }} + } + @if (row.node.outlet) { + outlet {{ row.node.outlet }} + } + | +
+ @if (row.node.redirectTo !== undefined) {
+ redirect → {{ row.node.redirectTo }}
+ } @else {
+ {{
+ row.node.component ??
+ (row.node.lazy === 'unloaded' ? 'lazy, not loaded yet' : row.node.kind)
+ }}
+ }
+ |
+ + @for (guard of guardList(row.node); track guard) { + {{ guard }} + } + @for (resolver of row.node.resolvers ?? []; track resolver) { + resolve {{ resolver }} + } + | +{{ row.node.title ?? '' }} | ++ @if (canNavigate(row.node)) { + @for (param of params(row.node); track param) { + + } + + } + @if (row.node.kind === 'lazy' && row.node.lazy === 'unloaded') { + + } + | +