忽略根 RouterModule 中的路径答案

【问题标题】：Ignore a path in the root RouterModule忽略根 RouterModule 中的路径
【发布时间】：2020-05-19 23:49:19
【问题描述】：

我正在使用 Angular 9。我在根目录中有一个 JSON 文件，我不想将其包含在应用程序中。换句话说：

/src
  |-- /app
  |-- /assets
  |-- index.html
  |-- do_not_include_this_file.json

这意味着 http://example.com/do_not_include_this_file.json 应该被 RouterModule 忽略，而是直接转到文件。目前该路径将重定向到 PageNotFoundComponent，例如

export const APP_ROUTER_PROVIDERS: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
];

如何让 RouterModule 完全忽略路径？

【问题讨论】：

这应该在网络服务器级别完成，例如配置 nginx/apache/IIS 以直接提供该文件。但是，这不是您在此处 (stackoverflow.com/questions/61395911/…) 已经提出的问题，您得到了答案但没有提供反馈吗？

标签： angular angular-router

【解决方案1】：

您可以将“do_not_include_this_file.json”作为根目录中的静态文件提供。

检查 Angular 应用程序的根目录中是否有一个名为“angular.json”的文件。在“angular.json”中，您可以使用资产实体。您包含在资产值数组中的任何文件或目录都将以静态方式提供。在此处添加您的静态文件。启用后，所有这些文件也将在生产环境中提供/复制到 dist 目录。

以下代码假定您的 src 文件夹中有“do_not_include_this_file.json”，并将其提供给输出的根目录。

"projects": {
  "YourProject": {
      "root": "",
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "assets": [
              ...
              {
                "glob": "do_not_include_this_file.json",
                "input": "src/",
                "output": "/"
              },
              ...
            ]

这里是更多信息的页面； https://angular.io/guide/workspace-config#asset-config

【讨论】：

完美。谢谢！

【解决方案2】：

将您的 json 文件移动到资产。

在您试图忽略的路由配置 jsonfile 路由中。

 {path: 'do_not_include_this_file.json',pathMatch: 'full', redirectTo: 'assets/do_not_include_this_file.json'}

【讨论】：

【解决方案3】：

编辑：这可能是错误的，请参阅其他答案。

我认为这是不可能的（或者至少不应该这样做，见下文）。单页应用程序的要点是它处理它的路由，即。没有页面加载，但 SPA 读取 URL 中的内容，并根据您的路由器配置显示组件。这实际上不是特定于角度的，每个 SPA 都是这样工作的，即使它们具有与路由器和组件不同的抽象。你想做的事情恰恰相反。

此外，为了让 SPA 工作，它们也需要特定的 Web 服务器配置：对于 baseHref 下的每个 URL，都必须返回 index.html。这就是书签和页面重新加载的工作原理，因为想象一下如果用户为myapp.com/profile/settings 添加了书签。 SPA 的代码链接在 index.html 中，它必须被加载，以便代码可以决定当 URL 为profile/settings 时显示什么。同样，当用户加载 myapp.com/profile/settings 时，网络服务器返回 index.html，就像请求是 myapp.com/index.html 一样。 SPA 加载后，它会检查 URL，并相应地显示页面或组件。如果没有设置这个机制，你不能直接去/profile/settings，但是你必须先打开myapp.com/index.html（或者myapp.com/）然后手动导航到SPA里面的配置文件设置。

现在想象一下，您想要的还需要在网络服务器中对此机制进行显式异常，因为在打开 myapp.com/my-fancy.json 时，网络服务器必须进行异常并实际提供 json。

这里有一个计划，您可能仍然能够实现您所描述的内容，但它不是那么好，而且可能不值得复杂化：

在您的网络服务器的路由中实现此异常，以便始终返回 index.html，除非专门请求该 json，在这种情况下返回该 json
为 json 文件创建一个路由和一个组件，当您导航到该 URL 并且该组件已加载时，只需调用 location.reload(true)，这会导致浏览器向网络服务器发送一个新请求，网络服务器将只提供 json
- 或者，json url 的组件可能是一个空的占位符，您可以在route guard 中捕获导航并触发页面重新加载

【讨论】：