忽略根 RouterModule 中的路径

Question

我正在使用 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 完全忽略路径？

Answer 1

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

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

此外，要使 SPA 正常工作，它们也需要特定的 Web 服务器配置：对于 baseHref 下的每个 URL，index.html 必须是 return编辑。这就是书签和页面重新加载的工作原理，因为想象一下如果用户将 myapp.com/profile/settings 添加为书签。 SPA的代码链接在index.html中，必须要加载，这样代码才能决定在URL为profile/settings时显示什么。同样，当用户加载 myapp.com/profile/settings 时，网络服务器 return 的 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 始终被 returned，除非特别请求 json，在这种情况下 return json
为 json 文件创建路由和组件，当您导航到 URL 并且该组件已加载时，只需调用 location.reload(true)，这会导致浏览器向网络服务器发送一个新请求，网络服务器将只提供 json
- 或者，json 的 url 的组件可能是一个空占位符，您可以捕获导航并在 route guard[=41 中触发页面重新加载=]

Answer 2

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

在您的路由配置中 json您试图忽略的文件路由。

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

Answer 3

您可以 "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

忽略根 RouterModule 中的路径

Ignore a path in the root RouterModule

angular

angular-router