無法在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，如果這些都不夠用，這可能是最有利的。