Fix asset detail page visibility issue after update to v0.104.0

[Copilot]

Fixes a regression introduced in v0.104.0 (Angular 14→18 upgrade) where the asset detail page appeared blank after clicking any asset.

Root Cause

In details.page.html, the *ngIf conditions used strict equality (=== true / === false) against the ngrxPush pipe output of showCaptureDetailsInIframe$. In Angular 18 with NgRx 18, when an observable hasn't emitted yet, ngrxPush returns undefined — meaning both conditions evaluate to false, so neither the Ionic nor iframe view component renders. showCaptureDetailsInIframe$ depends on _activeDetailedCapture$ (a ReplaySubject populated asynchronously after a database read), so the slide was blank on initial render.

Changes Made

src/app/features/home/details/details.page.html

Replaced the async showCaptureDetailsInIframe$ observable conditions with synchronous checks using the *ngFor loop variable and networkConnected$ (which emits immediately on subscription):

• *ngIf="!detailedCapture.id || (networkConnected$ | ngrxPush) !== true" — shows the Ionic view when the asset is not yet uploaded or the device is offline
• *ngIf="!!detailedCapture.id && (networkConnected$ | ngrxPush) === true" — shows the iframe view when the asset is uploaded and the device is online

src/app/app-routing.module.ts

Added paramsInheritanceStrategy: 'always' to RouterModule.forRoot to ensure route params (type, hash) are correctly propagated to child routes in Angular 18.

Testing

• ✅ ESLint passes — All files pass linting
• ✅ Prettier formatting passes on all changed files

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Bug] Asset detail page not visible after update v0.104.0</issue_title>
<issue_description>## Description

After updating to v0.104.0, users cannot see the asset detail page after clicking an asset. This issue was not present in the previous version (v0.103.2).

Steps to Reproduce

1. Update Capture Cam to v0.104.0
2. Log in and navigate to the asset list
3. Click on any asset
4. Observe that the asset detail page does not appear

Expected Behavior

• Expected: When clicking an asset, the asset detail page should be displayed as in previous versions.
• Actual: Nothing happens or asset detail page does not load after clicking an asset.

Logs

Screen recordings v0.104.0
https://github.com/user-attachments/assets/fb0cf925-024e-40df-81ef-5499aa37c7c1

Screen recordings v0.103.2
https://github.com/user-attachments/assets/cd19e51d-5dda-4a1d-9430-ca472c48ae5d

Environment

• Version: v0.104.0 (Worked in v0.103.2)
• OS:
  • iOS 26.3 (Tested: iPhone 17 Pro)
  • Android 16 (Tested: Google Pixel 6a)
• Device: iPhone 17 Pro, Google Pixel 6a
  </issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [Bug] Asset detail page not visible after update v0.104.0 #3364

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[wcchung]

@copilot have you finish fixing the issue?

[Copilot]

@copilot have you finish fixing the issue?

Yes, the fix is complete (commit 22092fb).

Root cause: In Angular 18, the template conditions (showCaptureDetailsInIframe$ | ngrxPush) === false/true both evaluate to false initially because ngrxPush returns undefined when the observable hasn't emitted yet. showCaptureDetailsInIframe$ depends on _activeDetailedCapture$ (a ReplaySubject populated asynchronously from the local database), so neither app-capture-details-with-ionic nor app-capture-details-with-iframe renders — the slide appears blank.

Fix (2 changes):

1. details.page.html: Changed *ngIf conditions to use detailedCapture.id (synchronous, available immediately from *ngFor) and networkConnected$ (emits immediately on subscription) directly, bypassing the async dependency on activeDetailedCapture$.
2. app-routing.module.ts: Added paramsInheritanceStrategy: 'always' to ensure route params propagate correctly in Angular 18.

Lint passes (All files pass linting). The local test environment is blocked by pre-existing missing native package builds (@numbersprotocol/preview-camera, @numbersprotocol/preview-video) — these are unrelated to this fix and CI with full npm install handles them correctly.