时间戳

首页 > 解决方案 > 在 Digital Ocean 应用平台上刷新 Angular SPA 时出现 404 页面

angular - 在 Digital Ocean 应用平台上刷新 Angular SPA 时出现 404 页面

问题描述

我一直在将新的 Digital Ocean 应用平台上的 Angular 单页应用作为静态站点进行测试。

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

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

在此处输入图像描述

在此处输入图像描述

标签： angularsingle-page-applicationdigital-oceanstatic-site

解决方案

编辑：

您现在可以正式使用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设置？在应用仪表板中单击设置选项卡，然后在应用规范行中单击视图

而已

推荐阅读