Question

在我的主模块（app.module）中使用以下Angular 2 Routes，我能够成功导航所有引用的组件视图。

const routes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: HomeComponent},
    {path: 'other', component: OtherComponent},
    {path: 'extra', component: ExtraComponent},
    {path: 'group', component: GroupComponent,
        children: [
        {path: '', component: FirstPageComponent},
        {path: 'comp1', component: FirstPageComponent},      
        {path: 'comp2', component: SecondPageComponent},
        {path: 'comp3', component: ThirdPageComponent},
        {path: 'comp4', component: FourthPageComponent}
        ]
    },
    {path: '**', component: HomeComponent}
];

另外，使用LocationStrategy，如下所述： LocationStrategy and browser URL styles

我可以访问

http://localhost:3000/extra

直接在地址栏上输入，因为路径被重定向到应用程序的根目录并由Angular的路由处理。

但我无法直接访问像

这样的子路线

http://localhost:3000/group/comp2

这会产生404错误，因为请求的所有资源都从路径http://localhost:3000/group/开始......这是不正确的。

通过RouterLink指令的应用内导航工作正常。

任何建议都将受到赞赏。

更新：

问题似乎不是由Angular路由机制或Web服务器配置引起的。即使重新加载或在地址栏中键入路径，路由也能正常工作，因为lite-server配置为将所有路径重定向到index.html。

问题是index.html正在使用相对路径加载一些脚本和样式表，就像我的一个组件一样（加载配置文件）。

所以重新加载/输入路径时

http://localhost:3000/group/comp2

服务器重定向到index.html，例如：

<script type="text/javascript" src="assets/vendor/bootstrap/js/bootstrap.min.js" ></script>

但完整的src路径现在变为：

src = "group/assets/vendor/bootstrap/js/bootstrap.min.js"

哪个不存在。

我可以使用绝对路径来解决此问题，但由于我的生产环境未确定且应用程序的根路径未知，因此无法实现。

我一直试图找到一种方法来确定应用程序在运行时的根路径，并使src =“..”链接动态但无法解决它，所以我决定编辑我的路由，以便所有的他们是兄弟姐妹，没有儿童路线。

感谢您的帮助，并对此问题的误解感到抱歉。

Answer 1

与您需要在angular2 documentation

中配置回溯到index.html描述之前相同

Answer 2

问题可能是你没有＆lt; base＆gt; index.html中设置的标记。

<base href='/'>

我遇到了这个问题并实现了＆lt; base＆gt;标签已被不正确地插入＆lt; head＆gt;之外标签。我把它移到里面，儿童路线开始为我工作。

Angular 2从URL访问子路由

更新：

2 个答案: