CODEWITHSUNDEEP
angular
Luigi Cordoba Granera
Luigi Cordoba Granera

Reputation: 619

How to preview a static file in my project using Angular 8?

I'm using Angular 8, in my project I have a folder with the release notes in pdf, I want to preview the pdf in my browser (native chrome pdf viewer).

Do I need to configure anything in the router?

The file is in the angular project, trying locally for now.

<a href="./release_notes/ReleaseNotes-Version_1.0.38.pdf" target="_blank">Release Notes</a>

When I click a link with the url to my static file, the router shouts there is no route with that name.

Upvotes: 0

Views: 1279

Answers (1)

Nanang Mahdaen El-Agung
Nanang Mahdaen El-Agung

Reputation: 1434

Angular Dev Server will send a response for non asset paths with the index.html. So if you click that path it will open your Angular app and the Angular router will try to find a route for that path.

Since you want to view a static file, you can register your release notes folder as an asset to the angular.json, and setup a rewrite handler on the production server. By registering the folder as an asset, it'll be included when you build the app. Example:

angular.json

Find the build options on your angular.json and change the assets to something like this:

{
  "assets: [
    "src/assets",
    "src/release_notes"
  ]
}

Production Server

You can try to serve your dist folder using superstatic server and add this configuration to superstatic.json file on the project's root folder. The server will only send a response with index.html only if there is no matching file/folder with the requested path. You can install superstatic via npm with command: npm install -g superstatic.

{
  "rewrites": [
    {
      "source": "/**",
      "destination": "/index.html"
    }
  ]
}

Start the server with command:

superstatic ./dist/your-app-name

Upvotes: 2

Related Questions