无法在Angular 2中获得路由工作

Question

我有我的Angular 2应用程序（最新完整版本不是RC或测试版），其设置与教程（https://angular.io/docs/ts/latest/guide/router.html）上的结构相同。当我把

<base href="/" /> 

在我的index.html我得到404错误以下：

<script src="node_modules/core-js/client/shim.min.js"></script> 
<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/reflect-metadata/Reflect.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 

<!-- 2. Configure SystemJS --> 
<script src="systemjs.config.js"></script> 

而此行产生错误“的JavaScript运行时错误：“系统未定义” System.import（'app'）。catch（function（err）{console.error（err）;}）;

如果我删除了基本标记，上面的代码都很好，但是我得到了“没有基础href集合，请为APP_BASE_HREF标记提供一个值或向文档添加一个基本元素。

如果我改变为基本href，以

<base href="app" /> 

，我没有得到上面任何404错误，要么，但我得到的错误“未处理的承诺拒绝：不能匹配任何路线：”

以下是我的app.routing.ts：

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { BatteriesComponent } from './batteries/batteries.component'; 
import { CabinetsComponent } from './cabinets/cabinets.component'; 
import { RacksComponent } from './racks/racks.component'; 
import { ReportsComponent } from './reports/reports.component'; 

const appRoutes: Routes = [ 
{ 
    path: '', 
    redirectTo: './app/batteries/batteries', 
    pathMatch: 'full' 
}, 
{ path: 'batteries', component: BatteriesComponent }, 
{ path: 'cabinets', component: CabinetsComponent }, 
{ path: 'racks', component: RacksComponent }, 
{ path: 'reports', component: ReportsComponent } 
]; 

export const appRoutingProviders: any[] = [ 

]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

请帮忙。

谢谢

Answer 1

这意味着您的索引找不到您提供的来源。

是否有可能您的index.html与您所引用的文件的级别不同？

-src/index, app 
-node_modules/core-js/client/shim.min.js 

如果你的设置是这样的，那么你必须为你的库文件是../node_modules/core-js/client/shim.min.js做一个相对路径等等

此外，索引应该有<base href="/" />因为这是基础和初步的你的应用程序引导。所有其他文件将相对于该位置进行定位。

您的路由重定向应链接到您已命名的路径。 而不是'./app/batteries/batteries'使用'batteries'为相对重定向或'/batteries'为相反。

如果你可以发布plnk，如果这些都不够用，这可能是最有利的。