为什么路径定位策略不适用于 ng serve

Question

在我的 angular 应用程序中，如果我想通过浏览器的地址栏导航到功能模块的路径，或者通过热重载重新加载页面，我会得到一个空页面。

检查页面时：

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

我的路线： localhost:4200/（有效），localhost:4200/feautre（有效），localhost:4200/feature/second（无效）

// 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

base href设置为/（<base href="/">）。

我的 build 和 angular.json 的 serve

"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"
    }
  }
}

版本：Angular：10.1.4Angular CLI：10.1.4.

我正在使用 ng serve 启动 Angular 实时开发服务器。开发服务器不应该自动将不匹配路径的 URL 重写为 index.html 吗？

也许这个基本示例会有所帮助，尽管它在这里有效。我不知道这是否仅仅是由于 Stackblitz，但我的进口、声明是相同的。 https://stackblitz.com/edit/angular-ivy-ased48?file=src/app/app.component.ts

编辑：

我认为这个问题 How to use PathLocationStrategy on localhost? 解决了同一个问题，但没有提供解决方案。

这里也一样How to run ng serve with PathLocationStrategy while falling back to index.html when page is refreshed无解

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

Answer 1

根据您最后的评论，您可以使用

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

这将解决您的问题

Answer 2

事实证明这个错误很愚蠢...

在我的 index.html 文件中 <app-root> 没有被 <body> 标签包围。虽然我不知道为什么会导致这种行为。

Answer 3

我遇到了同样的问题：

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

这个答案帮助我解决了我的问题。

为什么路径定位策略不适用于 ng serve

Why does path location strategy not work with with ng serve

typescript

angular-routing

angular

编辑：