Angular Маршрутизация в режиме разработки неправильно переписывает URL

Question

Использование Angular 8.2.0

У меня обычно возникает проблема при развертывании приложения Angular на веб-сервере, где необходимо настроить сервер для перезаписи URL-адресов для обслуживания индекса. html для Angular маршрутизации на работу. У меня эта проблема при работе в режиме разработки с ng serve.

Я не могу создать маршруты длиннее одного сегмента. Пример app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ConstructorLandingComponent } from './constructor-landing/constructor-landing.component';
import { EventDetailsViewComponent } from './event-details-view/event-details-view.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'landing',
    pathMatch: 'full'
  },
  {
    path: 'nest/test',
    component: ConstructorLandingComponent
  },
  {
    path: 'landing',
    component: ConstructorLandingComponent
  },
  {
    path: 'details',
    component: EventDetailsViewComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Любой маршрут с одним уровнем (например, localhost:4200/landing) работает нормально, но если я пытаюсь получить доступ к localhost:4200/nest/test, сервер angular dev выглядит например, для angular времени выполнения на localhost:4200/nest/runtime.js. Насколько я понимаю, CLI Angular должен обрабатывать перезапись URL для вас. Возможно ли проблема с моим angular. json? Или, может быть, я упускаю что-то действительно очевидное.

Редактировать: Вот архитектурный раздел angular. json, включая разделы build и serve:

"architect": {
    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
            "outputPath": "dist/navigator",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ],
            "styles": [
                "src/styles.scss"
            ],
            "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,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": true,
                "budgets": [{
                        "type": "initial",
                        "maximumWarning": "2mb",
                        "maximumError": "5mb"
                    },
                    {
                        "type": "anyComponentStyle",
                        "maximumWarning": "6kb",
                        "maximumError": "10kb"
                    }
                ]
            },
            "staging": {
                "fileReplacements": [{
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.staging.ts"
                }],
                "optimization": true,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "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": "navigator:build"
        },
        "configurations": {
            "production": {
                "browserTarget": "navigator:build:production"
            }
        }
    },
    ...
}

Answer 1

<router-outlet></router-outlet>

должно быть в вашем индексе. html