在Digital Ocean App Platform上刷新Angular SPA时的404页面

如何解决在Digital Ocean App Platform上刷新Angular SPA时的404页面

我已经在新的Digital Ocean App Platform上作为静态站点测试了Angular单页应用程序。

当我访问根URL并通过单击链接导航到其他页面时，Angular应用程序加载正常。但是，当我刷新任何页面上的浏览器时，都会收到404错误。

Digital Ocean App Platform是否需要一个nginx.conf文件？我是否错过了需要在环境中启用推送状态的步骤？

解决方法

编辑：

您现在可以正式使用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设置？在应用信息中心中，点击设置标签，并在应用规范行中，点击视图

就这样

,

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

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

,

另一种解决方法是在成角度的路线之前使用“＃”，例如：“ myapp.com /＃/ someroute”（https://angular.io/guide/router）。

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

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

我在这里遇到了同样的问题，效果很好。 在DigitalOcean解决此问题之前，我将使用这种方式。