Angular中使用ngx-extended-pdf-viewer时保留URL中#符号的配置问题咨询

Hey there! Let's break down your problem and find a solution.

First off: your RouterModule configuration is correct. Setting useHash: true in RouterModule.forRoot() is the standard Angular way to enable hash-based routing, which should preserve the # in your URLs. The issue here likely stems from how the older version of ngx-extended-pdf-viewer (7.3.2) handles URL routing internally.

Here are actionable steps to fix the # being removed:

1. Explicitly Enable Hash Mode for the PDF Viewer Component #

The ngx-extended-pdf-viewer has its own routing logic for features like syncing page numbers to the URL. To make it respect your Angular hash routing, add the [useHash]="true" input to the component in your template:

<ngx-extended-pdf-viewer
  [src]="yourPdfUrl"
  [useHash]="true"
  <!-- Add your other component properties here -->
></ngx-extended-pdf-viewer>

This forces the component to use hash-based URLs instead of overriding your global Angular routing setup.

2. Disable Browser Router if You Don't Need It #

If you don't require the viewer to sync URL changes (like updating the URL when navigating pages), you can turn off its browser router entirely. Add [enableBrowserRouter]="false" to the component:

<ngx-extended-pdf-viewer
  [src]="yourPdfUrl"
  [enableBrowserRouter]="false"
  <!-- Other properties -->
></ngx-extended-pdf-viewer>

This prevents the component from modifying the URL at all, so your Angular hash routing remains intact.

3. Check for Zone.js Compatibility #

Your zone.js version (~0.10.3) is a bit outdated, and older versions can sometimes cause unexpected behavior with third-party components like ngx-extended-pdf-viewer. If the above steps don't work, try updating zone.js to a stable patch version that matches your Angular version (make sure to back up your project first!).

4. Verify No Routing Conflicts #

Ensure none of your child modules are overriding the root routing configuration. All child modules should use RouterModule.forChild(routes) instead of redefining useHash—this keeps the global hash routing setting consistent across your app.

Final Note #

Older versions of ngx-extended-pdf-viewer have had reported quirks with hash routing, so the component-specific useHash flag is usually the quickest fix. Give that a try first, and it should resolve the missing # issue.

内容的提问来源于stack exchange，提问作者Sanjay