Angular 2 rc1:组件没有路由配置

时间:2016-05-24 13:45:14

标签: javascript typescript routing angular

首先,我不认为这个问题是this one的重复。如果是,抱歉。

我正在进行角度2应用。几周前,我正在使用beta15。由于某些原因,我决定更新到rc1:

  • 我更喜欢逐步更新而不是一次性更新
  • 这样做,我必须留意更改日志
  • 第三方跟随运动

当然,我遇到了一些问题,我已经手动更新了包裹 并清理我的代码。

但仍有一个问题我无法弄清楚。我有这个错误: 的 component does not have route configuration 即可。我有嵌套路线。

另一个问题的区别在于我的组件不是子组件,而是主要组件。

这是我的Routeconfig声明(我使用router-deprecated

@RouteConfig([
         { path: '/home',    name: 'Home',   loader: () => Routes.lazyLoad('component@home', 'HomeComponent'),   useAsDefault: true },
         { path: '/media/...',  name: 'Media', loader: () => Routes.lazyLoad('component@media', 'MediaComponent') },
         { path: '/channel/...',  name: 'Channel', loader: () => Routes.lazyLoad('component@channel', 'ChannelComponent') },
         { path: '/playlist',  name: 'Playlist', loader: () => Routes.lazyLoad('component@home', 'HomeComponent') },
         { path: '/medias',  name: 'Medias', loader: () => Routes.lazyLoad('component@medias', 'MediasComponent') },
    ])
export class MainComponent {
    private prodEnv: boolean = initialState.prodEnv;
}

Routes.lazyload()是一个非常简单的函数,使用SystemJS导入组件:

public static lazyLoad(ref: string, component: string): any {
        return System.import(ref)
            .then((m: any) => m[component])
            .catch((err: any) => {
                console.error(err);
                return err;
            });
    }

当然,MediaChannel也有RouteConfig

以下是MediasComponents' RouteConfig

@RouteConfig([
    { path: 'add',          name: 'Add',        component: AddComponent,   useAsDefault: true },
    { path: 'manage',       name: 'Manage',     component: ManageComponent },
    { path: 'edit/:id',     name: 'Edit',       component: EditComponent }
])

ChannelComponent:

@RouteConfig([
    { path: 'add',          name: 'Add',        component: AddComponent,   useAsDefault: true },
    { path: 'manage',       name: 'Manage',     component: ManageComponent },
    { path: 'manage/:id',   name: 'ManageId',   component: ManageComponent },
    { path: 'edit/:id',     name: 'Edit',       component: EditComponent }
])

0 个答案:

没有答案