Problem obtaining a pdf in Angular 4

I am developing a module where a report is generated and obtained, when I use the method the report is generated correctly in pdf and it appears in the corresponding folder, but when I get it in the angular application it shows me the following error in the console of js:

link for pdf ../assets/reports/contracts/7022-20180422.pdf

7022-20180422.pdf:1 GET http://localhost:4200/assets/reports/contracts/7022-20180422.pdf
 404 (Not Found)

This is the tree of my file system of my application: * I try to get my pdf from the file app.component.html

├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
├── app.routing.ts
├── components
│   ├── printer.component.ts
├── models
├── reports
│   ├── 6110-20180422.pdf
│   ├── 616-20180422.pdf
│   ├── 627-20180422.pdf
│   ├── 6717-20180422.pdf
│   ├── 7022-20180422.pdf
│   └── 7123-20180422.pdf
├── services
└── views
    ├── admin
    │   ├── customer.html
    │   ├── employee.html
    │   ├── role.html
    │   └── user.html
    ├── admin-panel.html
    ├── Autentificacion.txt
    ├── auth.html
    ├── core
    │   ├── account.html
    │   ├── contract.html
    │   ├── printer_bu.html
    │   ├── printer.html
    │   ├── search-tickets.html
    │   └── ticket.html
    ├── core-panel.html
    ├── main-panel.html
    ├── page-sections
    │   ├── body.html
    │   ├── error.html
    │   ├── footerweb.html
    │   ├── header.html
    │   └── sidebar.html
    ├── products
    │   ├── inventary.html
    │   ├── product.html
    │   ├── service.html
    │   ├── warehouse-fake.html
    │   └── warehouse.html
    └── products-panel.html

* This is the structure of the assets

.
├── css
   ├── AdminLTE.min.css
   ├── _all-skins.min.css
   ├── bootstrap.min.css
   ├── font-awesome.min.css
   └── ionicons.min.css
├── fonts
   ├── fontawesome-webfont.woff
   └── fontawesome-webfont.woff2
├── img
   ├── avatar.png
   ├── boxed-bg.jpg
   ├── icons
      ├── clipboard.png
      ├── collaboration.png
      ├── contract.png
      ├── conveyor.png
      ├── customer.png
      ├── diskette.png
      ├── document\ (1).png
      ├── document.png
      ├── edit.png
      ├── email.png
      ├── file.png
      ├── group.png
      ├── id-card.png
      ├── layers.png
      ├── login.png
      ├── magnifying-glass.png
      ├── padlock.png
      ├── paperplus.png
      ├── pdf.png
      ├── pencil.png
      ├── print.png
      ├── report.png
      ├── rubbish.png
      ├── trolley.png
      ├── unlock.png
      ├── user.png
      └── warehouse.png
   ├── main-contract.png
   ├── paloma.png
   └── wait.gif
├── js
   ├── adminlte.min.js
   ├── bootstrap.min.js
   └── jquery.min.js
└── reports
    └── contracts
        ├── 113-20180422.pdf
        ├── 603-20180422.pdf
        ├── 6110-20180422.pdf
        ├── 638-20180422.pdf
        ├── 6512-20180422.pdf
        ├── 6717-20180422.pdf
        └── 7022-20180422.pdf