2

I am loading PDFTron web viewer in my angular 7 application. I am able to load PDFTron web viewer template in UI but while loading sample PDF file I am getting the error below.

enter image description here

I am getting 404 file not found error while loading .res file(https://localhost:5001/dist/webviewer/lib/core/pdf/pdfnet.res). but I have that .res file in that dist folder location. I have loaded js file that is in the same folder am able to load that (https://localhost:5001/dist/webviewer/lib/core/pdf/PDFworker.js)

I am thinking that issue with loading MIME types, I configured these MIME types in web config added path angular.json file and added MIME types in local IIS as well

I tried adding MIME types in below areas but no luck.

  • Added in Web.config, Appsettings files and added path in angular.json file.
  • And I added these .nmf .res and other required MIME types in my local IIS as well.
  • I added in MIME types in mime-db in node modules (Usually we don’t touch this node modules but I tried, whether this making any problem but this also not worked).

added in angular.json file like below

"assets": [
                        "src/assets",
                        "src/dist/assets",
                        "src/webviewer",
                        "src/files",
                        "src/dist/webviewer",
                        "src/dist/files",
                        "src/web.config",
                        "src/dist/web.config"
                ],

I created sample angular application from CLI, and integrated this PDFTron webviewer and it worked perfectly . Able to load PDF files in webviewer.

I am running my angular application build mode, while taking files from dist folder am facing these issues.(404 File not found and MIME file types not set issue).

Dino
  • 7,779
  • 12
  • 46
  • 85
madhu Goud
  • 127
  • 1
  • 3
  • 12

2 Answers2

1

If you're not able to load the .res file but you're able to load the .js file in the same folder then it's most likely the MIME type not being configured correctly as you've guessed. The configuration needs to be done for whichever server you're using.

Note that the web.config file should be placed in the root folder of your project. If the web.config isn't working for you, you might want to try setting it manually for IIS https://learn.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap#how-to

Open Internet Information Services (IIS) Manager

In the Connections pane, go to the site, application, or directory for which you want to add a MIME type. In the Home pane, double-click MIME Types.

In the MIME Types pane, click Add... in the Actions pane.

In the Add MIME Type dialog box, add the file name extension and MIME type, and then click OK.

You'll also want to make sure you're setting the correct values for the MIME type https://www.pdftron.com/documentation/web/faq/mime-types#pdf-and-office

res application/octet-stream

pexe application/x-pnacl

nmf application/octet-stream

mem application/octet-stream

wasm application/wasm

Community
  • 1
  • 1
mparizeau
  • 663
  • 5
  • 12
  • Thanks for your help, I have added MIME types in IIS and Web config as well and placed in the root folder but no luck, still am getting same MIME type not set the issue – madhu Goud Aug 13 '19 at 10:11
  • @madhuGoud Are you launching IIS from Visual Studio? If so, then the MIME types are set in a completely different location than "normal" IIS. – Ryan Aug 16 '19 at 02:45
  • Did u fix this error? I am facing the same problem, mine is working fine in local host, however after bulding and deploying the same error comes – Pran R.V Mar 19 '21 at 12:33
0

If you are using window server, your angular app will be having a web.config file which which u declared in angular.json assets array in build section. Adding mimetypes in that web.config file fixed my issue.

     <mimeMap fileExtension=".nmf" mimeType="application/octet-stream" />
     <mimeMap fileExtension=".pexe" mimeType="application/x-pnacl" />
     <mimeMap fileExtension=".mem" mimeType="application/octet-stream" />
     <mimeMap fileExtension=".brotli" mimeType="text/plain" />
     <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
     <mimeMap fileExtension=".res" mimeType="application/octet-stream" />
Pran R.V
  • 1,015
  • 12
  • 21