直接访问时Angular2参数URL不起作用答案

【问题标题】：Angular2 parameter URL not working when visited directly直接访问时Angular2参数URL不起作用
【发布时间】：2016-11-08 11:03:44
【问题描述】：

我已经用参数配置了 Angular2 路由。当我从[routerLink] 之一访问/censo/119 或/viaje/119 时，我已经定义它工作正常。但是当我直接访问 url http://localhost:3000/censo/119 时，我得到了 404。

我将lite-server 用于我的开发应用程序。

我是否缺少配置？我需要使用不同的服务器吗？

这是我的app.routes.ts

const routes: RouterConfig = [
  { path: '', component: CensoComponent },
  { path: 'censo', component: CensoComponent },
  { path: 'viajes', component: ViajesComponent },
  { path: 'censo/:viaje', component: CensoDetailComponent },
  { path: 'viajes/:viaje', component: ViajesDetailComponent },
];

这是我的路由器链接

<a [routerLink]="['/censo']">Censo</a>
<a [routerLink]="['/viajes']">Viajes</a>
<a [routerLink]="['/censo',119]">Censo 119</a>
<a [routerLink]="['/viajes',119]">Viaje 119</a>
<router-outlet></router-outlet>

编辑

我添加了bs-config.json，但我得到了相同的行为。

{
    "port": 8000,
    "files": ["./**/*.{html,htm,css,js}"],
    "server": { "baseDir": "." }
}

这是我在浏览器中得到的。

这是我的项目结构，以防万一。

谢谢

【问题讨论】：

您的路线看起来不错。请在这篇文章中查看我的回答。 stackoverflow.com/questions/38209427/…
当您访问来自routerLink 的链接时，浏览器中的哪个网址？
@AleksandrM 这是http://localhost:3000/viajes/119
@NickAcosta 谢谢。我添加了一个bs-config.json，但我得到了相同的行为

标签： typescript angular angular2-routing

【解决方案1】：

您应该从与您的index.html 相同的位置运行lite-server 命令。默认行为提供当前文件夹中的内容，打开浏览器，并将 HTML5 后备应用到 index.html。

如果您由于某种原因无法从该文件夹执行命令，并且您的 index.html 位于一个 src 映射中，该映射是您从中执行 lite-server 的文件夹的子文件夹，您应该添加一个 bs-config.json带有server 和baseUrl 属性的文件，如下所示：

{
  "server": { "baseDir": "./src" }
}

并像这样运行 lite-server，具体取决于您的配置文件名和位置：

lite-server -c ./bs-config.json

【讨论】：

我以npm run lite-server 运行它，我的package.json 和index.html 在同一个文件夹中。除了<base href="/">，我还需要index.html 中的其他内容吗？谢谢。
谢谢。我添加了bs-config.json，但我得到了相同的行为。