为什么 Angular 9 路由在我刷新的时候坏掉了？

Question

我有 angular 9 个应用程序，我使用 Heroku 部署它，一切正常，但是当磁带 F5 或我 copy/paste 我得到类似的东西（无法获取 /XXX/XXX），只有根 link 有效！

起初，我可以去任何路线，但是当我刷新页面时路线坏了，我必须添加根link（www.domain-name.com）才能得到我的应用程序！

我在 angular.js

上的构建配置

angular.js

      "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": true,
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "extractCss": true,
        "styles": [
          "src/assets/css/vendor/bootstrap.min.css",
          "src/assets/css/vendor/bootstrap.rtl.only.min.css",
          "./node_modules/@glidejs/glide/dist/css/glide.core.min.css",
          "./node_modules/quill/dist/quill.snow.css",
          "./node_modules/quill/dist/quill.bubble.css",
          "./node_modules/@ng-select/ng-select/themes/default.theme.css",
          "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
          "./node_modules/nouislider/distribute/nouislider.min.css",
          "./node_modules/angular-archwizard/archwizard.css",
          "./node_modules/angular-calendar/css/angular-calendar.css",
          "./node_modules/ngx-lightbox/lightbox.css",
          "./node_modules/video.js/dist/video-js.min.css",
          {
            "input": "src/assets/css/sass/themes/vien.light.blueyale.scss",
            "bundleName": "light.blue.yale",
            "inject": false
          }

        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
    },

这是我的 server.js

server.js

//Install express server
const express = require('express');
const path = require('path');

const app = express();

// Serve only the static files form the vien-angular directory
app.use(express.static(__dirname + '/dist'));


// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

有什么想法吗？！谢谢

Answer 1

在包含所有路由的末尾添加：-

app.get('*',(req,res) =>{
    res.sendFile(path.join(__dirname,'dist/index.html'));
});

为什么 Angular 9 路由在我刷新的时候坏掉了？

Why Angular 9 routing is broken when i refresh?

heroku

angular

angular9