无法让路由在 Angular 2 中工作

Question

我的 Angular 2 应用程序（最新的完整版本不是 RC 或 beta）设置为与教程 (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' 未定义” 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，如果这些还不够，那可能是最有益的。