开发模式下的Angular路由不能正确重写URL
开发模式下的Angular路由不能正确重写URL
提问于 2020-01-18 02:08:12
使用Angular 8.2.0
在将Angular应用部署到web服务器时，我遇到了一个常见的问题，该服务器必须配置为重写URL以服务于index.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开发服务器会在localhost:4200/nest/runtime.js中查找angular运行时。我的理解是Angular CLI应该为你处理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"
}
}
},
...
}回答 1
Stack Overflow用户
发布于 2020-04-18 22:12:14
<router-outlet></router-outlet>
应该在你的index.html中
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59792773
复制相关文章
相似问题
腾讯云开发者
