在数字海洋应用平台上刷新角SPA时404页

Question

我已经测试了一个角单页应用程序在新的数字海洋应用平台作为一个静态网站。

当我访问根URL并通过单击链接导航到不同的页面时，这个角度应用程序会很好地加载。但是，当我在任何页面上刷新浏览器时，都会出现404错误。

数字海洋应用平台需要一个nginx.conf文件吗？我是否遗漏了需要在环境中启用推状态的一步？

​

​

​

​

Answer 1

更新(11月24日，2020年)控制面板现在支持在组件设置下的“自定义页面”部分下的所有文档选项。

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

Answer 2

编辑：

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

我认为现在还不可能在app平台上进行正式的水疗。更多的信息在这里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 3

另一个解决办法是在角路径之前使用"#“，如"myapp.com/#/someroute”(https://angular.io/guide/router)。

在app-routing.module.ts中，将参数"useHash“设置为RouterModule.forRoot上的true：

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

我在这里也有同样的问题，而且运作得很好。我将使用这种方式，直到DigitalOcean解决这个行为。