как я могу разместить файл в Angular с маршрутизацией?

Question

Допустим, у меня есть файл pdf, который я хочу разместить на своем сайте angular (v7). У меня он находится в моей папке wwwroot, и при попытке перейти к этой папке и файлу через angular маршрутизацию я получаю сообщение об ошибке, что маршрут не существует

, например, файл находится в wwwroot/sub/file.pdf у моего маршрута есть путь, скажем /files/file.pdf. это будет конечная точка на моем сайте www.example.com/files/file.pdf

const routes: Routes = [
  { 
    path: 'files/file.pdf', //this is when a user types www.example.com/files/file.pdf
    redirectTo: '/sub/file.pdf' //this is where the file is stored in wwwroot
  }
];

Я проверил свой путь и перенаправил на компонент, работает нормально.

этот компонент находится в папке приложения tho, которая полностью отделен от папки wwwroot. Мне все равно, где находится файл, при необходимости я перенесу его в папку приложения, но я пробовал это и, похоже, не могу заставить его работать.

Поскольку wwwroot и папка приложения - это две отдельные папки, я не знаю, как попасть в приложение из wwwroot., мои первые мысли были от wwwroot aka www.example.com до go до уровня ../, а затем в app/src/..., конечно, это тоже не сработало, и я не думаю, что вы можете go над папкой wwwroot в структуре таким образом.

как я могу использовать этот файл из моей wwwroot папки ( или где-нибудь еще) на моем angular сайте?

спасибо

Answer 1

Измените конфигурацию assets проекта в файле angular. json, чтобы включить файлы stati c в развертывание вашего приложения. Обратитесь к документации по адресу: https://angular.io/guide/workspace-config#assets -configuration , чтобы включить файлы через шаблон глобуса.

В вашем случае конфигурация может выглядеть так:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "assets": [
              ...
              './files/**/*'
            ]
          }
        }
      }
    }
  }
}

Затем создайте ссылку на файл, как если бы вы загружали файл из root вашего веб-сайта: <a href="/files/file.pdf">Download</a>.