Digital Ocean App Platform刷新Angular SPA时出现404页面

Question

我一直在新的 Digital Ocean App Platform 上测试 Angular 单页应用作为静态站点。

当我访问根 URL 并通过单击链接导航到不同页面时，Angular 应用程序加载正常。但是，当我在任何页面上刷新浏览器时，出现 404 错误。

数字海洋应用平台需要nginx.conf文件吗？我是否缺少需要在环境中启用 pushstate 的步骤？

Answer 1

编辑：

您现在可以在本说明中正式使用 catchall_document 属性而不是 error_document。

我认为目前无法在应用平台中使用官方 SPA。更多信息在这里 https://www.digitalocean.com/community/questions/digital-ocean-apps-spa-application

但目前有一个解决方法。

创建app.yaml文件

name: APP_NAME
region: fra
static_sites:
- build_command: |-
    git init
    git clean  -d  -f .
    git remote add origin https://github.com/REPOSITORY
    git fetch origin $BRANCH_NAME
    git checkout $COMMIT_SHA
    npm install
    npm install -g @angular/cli
    ng build --prod
  environment_slug: node-js
  github:
    branch: master
    deploy_on_push: true
    repo: REPOSITORY
  name: APP_NAME
  error_document: index.html
  routes:
  - path: /

在这个文件中，我们将 error_document 设置为 index.html（我们的索引文件）。现在每个页面都重定向到索引文件。

然后你必须运行 doctl 命令使用 app.yaml 文件创建新的应用程序。您必须使用此命令才能应用此配置文件。

doctl apps create --spec app.yaml

之后转到您的应用平台仪表板，您可以看到您的 SPA 应用程序

如何设置doctl？ https://www.digitalocean.com/docs/apis-clis/doctl/how-to/install/

如何查看我当前的 .yaml 设置？在应用仪表板中单击设置选项卡并在 应用规范 行中单击查看

就是这样

Answer 2

另一种解决方法是在 angular 路由之前使用“#”，例如：“myapp.com/#/someroute” (https://angular.io/guide/router).

在 app-routing.module.ts 中将参数“useHash”设置为 true on RouterModule.forRoot:

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true,
    }),
  ],
  exports: [RouterModule],
})

我在这里遇到了同样的问题，但它工作得很好。在 DigitalOcean 解决此问题之前，我会一直使用这种方式。

Answer 3

更新（2020 年 11 月 24 日）控制面板现在支持“自定义页面”部分下组件设置中的 Catchall 文档选项。

每https://www.digitalocean.com/community/questions/angular-routes-not-working-on-static-app

Digital Ocean App Platform刷新Angular SPA时出现404页面

404 page when refreshing Angular SPA on Digital Ocean App Platform

static-site

single-page-application

digital-ocean

angular