angular - Why Angular 9 routing is broken when i refresh?

Question

I have angular 9 application, I deployed it using Heroku, all work perfectly, but when a tape F5 or I copy/paste the like I get (Cannot GET /XXX/XXX), only the root link works!

At first, I can go to any route, but when I refresh the page the route broken, I must add the root link (www.domain-name.com) to get my application!

my build config on 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"
            }
          ]
        }
      }
    },

this is my 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);

any ideas ?! thanx

标签： angularherokuangular9

Answer 1

At the end where you have included all routes add this :-

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