如何通过路由在 Angular 中托管文件？答案

【问题标题】：how can i host a file in Angular with routing?如何通过路由在 Angular 中托管文件？
【发布时间】：2020-08-05 01:29:23
【问题描述】：

假设我有一个 pdf 文件，我想在我的 Angular 网站 (v7) 上托管。我在我的 wwwroot 文件夹中有它，当尝试通过角度路由路由到该文件夹和文件时，我收到一个错误，即路由不存在

例如文件位于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
  }
];

我已经测试了我的路径并重定向到一个组件，工作正常。

该组件位于 app 文件夹中，它与 wwwroot 文件夹完全分开。我不在乎文件的位置，如果需要，我会将其移动到 app 文件夹，但我已经尝试过了，但似乎也无法让它工作。

由于 wwwroot 和 app 文件夹是 2 个独立的文件夹，我不知道如何从 wwwroot 访问 app。我的第一个想法是从 wwwroot aka www.example.com 升级到 ../ 然后进入 app/src/... 当然这也不起作用，我认为你不能以这种方式进入结构中的 wwwroot 文件夹。

如何从我的 Angular 网站上的 wwwroot 文件夹（或其他任何地方）提供此文件？

谢谢

【问题讨论】：

标签： angular routes

【解决方案1】：

在 angular.json 文件中修改项目的 assets 配置，以便在您的应用程序部署中包含静态文件。请参阅位于https://angular.io/guide/workspace-config#assets-configuration 的文档，以通过 glob 模式包含文件。

在您的情况下，配置可能如下所示：

{
  "$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/**/*'
            ]
          }
        }
      }
    }
  }
}

然后，像从网站根目录下载文件一样链接到该文件：<a href="/files/file.pdf">Download</a>。

【讨论】：