Why does path location strategy not work with with ng serve

Question

In my angular application, if I want to navigate to a path of a feature module via the adress bar of the browser or the page is reloaded via hot reload, I get an empty page.

When inspecting the page:

Failed to load resource: the server responded with a status of 404 (Not Found)
// for runtime.js ployfills.js styles.js vendor.js main.js

My routes: localhost:4200/ (works), localhost:4200/feautre (works), localhost:4200/feature/second (doesn't work)

// app-routing.module.ts
{ path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) },
{ path: '', component: HomeComponent }

// feature-routing.module.ts
{ path: 'second', component: SecondComponent }, // doesn't work with hot reload and adress bar
{ path: '', component: FirstComponent }, // works with hot reload and adress bar

The base href is set to / (<base href="/">).

My build and serve of angular.json

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/frontend",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": true,
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
      "src/styles.css"
    ],
    "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"
        }
      ]
    }
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "frontend:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "frontend:build:production"
    }
  }
}

Version: Angular: 10.1.4 Angular CLI: 10.1.4.

I'm using ng serve to start the Angular Live Development Server. Shouldn't the dev server rewrite the URL of unmatched paths automatically to index.html?

Maybe this basic example will help, although it works here. I don't know if this is simply due to Stackblitz, but my imports, declartations are the same. https://stackblitz.com/edit/angular-ivy-ased48?file=src/app/app.component.ts

Edit:

I think this question How to use PathLocationStrategy on localhost? addresses the same Issue, but doesn't offer a solution.

Same here How to run ng serve with PathLocationStrategy while falling back to index.html when page is refreshed with no solution

By default, ng serve supports this. You shouldn't encounter this problem while running locally

Unmatched paths need to be handled by router with ** e.g. { path: '**', component: NotFoundPageComponent } — MoxxiManagarm
Already tried this, but i didn't help. According to other questions, index.html is searched for at feature/second/ (localhost:4200/feature/second), which of course does not exist there. The solution was to rewrite all URLs that do not match to index.html. But in my case I don't use a "real" server but only the dev server to do so. — invalidtry

Arrow Arrow · Accepted Answer · 2020-10-07T09:42:27

as per your last comment you can use

{ path: '**/*', component: NotFoundPageComponent }

that would solve your problem

Why does path location strategy not work with with ng serve

Edit:

3 Answers