404 error when configuring a single language

[asad-c]

In the docs it says the following:
If you need only one language, you can reduce the list to locale.properties and your language folder.

I'm getting the following error when trying to only support a single language:
zone-evergreen.js:2828 GET http://localhost:4201/assets/locale/en-CA/viewer.properties 404 (Not Found)

Here is my html markup:

 <ngx-extended-pdf-viewer 
            [src]="'...'" 
            backgroundColor="#ffffff" 
            [height]="'90vh'"
            [useBrowserLocale]="true" 
            [filenameForDownload]="filenameForDownload"
            [showBookmarkButton]="false"
            [showOpenFileButton]="false"
            [showSidebarButton]="false"
            [showFindButton]="false"
            [showSecondaryToolbarButton]="false"
            language="en-GB">
        </ngx-extended-pdf-viewer>

angular.json:

{
                "glob": "**/locale.properties",
                "input": "node_modules/ngx-extended-pdf-viewer/assets/locale",
                "output": "/assets/locale"
              },
              {
                "glob": "**/*",
                "input": "node_modules/ngx-extended-pdf-viewer/assets/locale/en-GB",
                "output": "/assets/locale/en-GB"
              },
              {
                "glob": "**/*",
                "input": "node_modules/ngx-extended-pdf-viewer/assets/images",
                "output": "/assets/images"
              },
              {
                "glob": "**/pdf.worker.js",
                "input": "node_modules/ngx-extended-pdf-viewer/ngx-extended-pdf-viewer/assets",
                "output": "/assets"
              }

Is this a bug or is the config incorrect? I don't know why it's looking for en-CA.

[stephanrauh]

Looks like a bug. Maybe I've introduced it when improving the i18n algorithm. As a workaround, you can add the locale Json to the index.html, together with setting useBrowserLocale="false".

[stephanrauh]

I believe to have successfully solved your issue with version 1.6.0-rc.1. Would you mind to run a test? There are still unsolved edge cases, such as languages like "en-NONSENSE" which don't exist, but I guess we can get away with ignoring these edge cases.

[asad-c]

The PDF displays now, but there is a console error:

zone-evergreen.js:2828 GET http://localhost:4201/assets/locale/en-US/viewer.properties 404 (Not Found)
viewer-es5.js:14690 http://localhost:4201/assets/locale/en-US/viewer.properties not found.

I have to support IE11, so switched to the es5 version of the scripts.

[stephanrauh]

Oops - same here. Both with the IE11 version and the ES2015 version.

[stephanrauh]

Now I'm positive I've solved the issue. Would you mind to test again?

Thanks,
Stephan

[NishadAbdul]

I am having the same issue when I tried to configure single language - en-US. PDF loads for me but local.properties logs console error as 404 along with more than 250 warnings which is not good for an application anyways. Some are:

viewer.min.js:21 "en" resource not found
#toggle_sidebar is undefined
Translation for the key #findbar_label is missing.
Warning: parseDestDictionary: unsupported action type "ResetForm".
viewer.min.js:21 PDF viewer: ngx-extended-pdf-viewer running on pdf.js 2.6.57
viewer.min.js:21 PDF 845996c0d5824d68b37adfcb0b462c46 [1.4 Acrobat Distiller 6.0 (Windows) / PageMaker 7.0] (PDF.js: 2.6.57) modified by ngx-extended-pdf-viewer)

Angular.json

{
"glob": "/locale.properties",
"input": "node_modules/ngx-extended-pdf-viewer/assets/locale",
"output": "/assets/locale"
},
{
"glob": "/",
"input": "node_modules/ngx-extended-pdf-viewer/assets/locale/en-US",
"output": "/assets/locale/en-US"
},
{
"glob": "**/",
"input": "node_modules/ngx-extended-pdf-viewer/assets/images",
"output": "/assets/images"
},
{
"glob": "/pdf.min.js",
"input": "node_modules/ngx-extended-pdf-viewer/assets",
"output": "/assets"
},
{
"glob": "/pdf.worker.min.js",
"input": "node_modules/ngx-extended-pdf-viewer/assets",
"output": "/assets"
},
{
"glob": "**/viewer.min.js",
"input": "node_modules/ngx-extended-pdf-viewer/assets",
"output": "/assets"
}

[stephanrauh]

@NishadAbdul Strange. I believe you approach works, but maybe you've missed a file or a folder. In general, I recommend simply copying the entire assets folder, as described here: https://pdfviewer.net/getting-started

That approach adds a few hundred kilobytes to your assets folder, but unless you wrap it into a Cordova app, that's no disadvantage. The clients only loads the files it really needs.

If you're sure you need only a single language, there's a better approach. The folder node_modules/ngx-extended-pdf-viewer/assets/inline-locale-files contains a lot of HTML snippets. Just copy the content of the en-US.html file into your index.html. If you set the attribute useBrowserLocale="false", the JSON file of the HTML snippet is used for the translations.

If you're unhappy to put the JSON file into the index.html, you can put it somewhere else later (after the first successful test). It just needs to be part of the DOM tree when ngx-extended-pdf-viewer is initialized.