Scully 预渲染 - 无法获取动态路由

Question

我正在使用 scully 预渲染一堆路由，我跳过 /board/:boardId:

的路由

   routes: {
        "/board": {
            type: 'ignored'
        }
    },
    extraRoutes: ["/",
        "/dashboard",
        "/uses"
    ]

/board 路由是动态的，即它看起来像 /board/[user-generated-boardId]，但是当我使用 npx scully serve 导航到它时，它中断了，例如

我不想预渲染 /board/:boardId 路由，它们应该像 angular SPA 一样工作，但似乎 scully 服务器正试图将它们映射到 [= 内的目录路径13=].

任何关于我如何获得与 scully 一起工作的静态和动态路由的建议都很棒！谢谢。

Answer 1

答案适用于 firebase 托管，但应该更普遍。

因为我使用的是 firebase 托管，所以我在我的项目 firebase.json:

中使用 firebase 托管配置解决了这个问题

{
    "hosting: [
    {
      "target": "static",
      "public": "dist/static",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "/dashboard/**",
          "destination": "/dashboard/index.html"
        },
        {
          "source": "/uses/**",
          "destination": "/uses/index.html"
        },
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ]
}

此配置规定 dashboard 和 uses 路由应映射到特定文件夹路径，其余应映射到根目录中的 index.html。

参考：https://firebase.google.com/docs/hosting/full-config

==

P.S。我的本地服务器 npx scully serve 仍然无法加载那些动态 /board/** 路由，但至少在部署到 firebase 时它可以工作。非常欢迎提出建议！！

Answer 2

您为 /board 定义了一条路线，它将排除该路线。但是，您没有为 /board/:boardId 定义路线，因此 Scully 将尝试渲染该路线。像这样修改您的配置：

        "/board": {
            type: 'ignored'
        },
        "/board/:boardId": {
            type: 'ignored'
        }
    },

这可能会解决您的问题。

对于你问题的另一部分，默认情况下，Scully 会尝试匹配它在发现过程中找到的路由。这样做是为了让您在测试过程中知道这条路线不存在。毕竟，Scully 服务器是一个开发工具，而不是部署工具。如果您 need/want 在未找到的路线上为 index.html 提供服务，您可以使用 404 option。您可以像这样将其添加到您的 CMD 行：

npx scully serve --404=index

通过这样做，Scully 将在 pre-rendered 以外的任何路线上为 index.html 提供服务。

Answer 3

当 Scully 找不到路由时，它应该默认生成预期的 Angular 客户端渲染页面。为了利用静态页面和 Scully 的一些好处，您可以为动态路由生成一个基页，告诉 Scully 忽略动态路由的其余部分。

示例正在转向此 routing-module 路径：

const routes: Routes = [
  { path: 'stuff/:id', component: StuffComponent },
];

分为两条路由，一条生成一条，一条忽略：

const routes: Routes = [
  { path: 'stuff', component: StuffComponent },
  { path: 'stuff/:id', component: StuffComponent },
];

不要忘记忽略 scully 中的动态路由。app-name。config.ts

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: 'app-name',
  outDir: './dist/static',
  routes: {
  '/stuff/:id': {
    type: 'ignored',
   },
  },
};

如果您需要在运行或生成时使用 Scully 的 2 个实用方法关闭或打开特定内容 isScullyRunning() & isScullyGenerated()

警告按照设计，Scully 开发服务器将不会加载动态路由。也就是说，如果你按照上面的做法 npx scully serve 仍然会导致 Cannot GET ... 错误。您必须使用功能齐全的服务器才能运行查看结果。例如在您的终端中：

cd dist/static
npx http-server

Scully 预渲染 - 无法获取动态路由

Scully prerender - Cannot GET dynamic route

angular-scully

scully

scullyio