Angular 2 RC5&@ angular/router 3.0.0-rc.1配置无效或有错误？

Question

在这种情况下,我使用Angular 2的RC5和最新的路由器遇到了这个问题.

我的routes.ts文件是这样的:

import {
  provideRouter,
  Routes,
  RouterModule
}
from '@angular/router';
import {
  OverviewComponent,
  LoginComponent,
  ProfileComponent
} from './shared';
import { AuthGuard } from './auth.guard';
import { HasToken } from './common/index';

const routes: Routes = [
  {
    path: '',
    component: OverviewComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    redirectTo: '/login'
  }
];

export const authProviders = [AuthGuard, HasToken];

export const appRouterProviders = [
  provideRouter(routes),
  authProviders
];

export const routing = RouterModule.forRoot(routes);

我的app.module.ts文件(bootstrap)是这样的:

import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {BrowserModule} from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {appRouterProviders, routing} from './routes';
import {
  OverviewComponent,
  LoginComponent,
  ProfileComponent
} from './shared';

@NgModule({
  declarations: [
    AppComponent,
    OverviewComponent,
    LoginComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    // Router
    routing,
    // Forms
    FormsModule,
  ],
    providers: [
      appRouterProviders,
        provide(AuthHttp, {
         useFactory: (http) => {
           return new AuthHttp(new AuthConfig({
             headerName: 'Authorization',
             headerPrefix: 'Bearer',
             tokenName: 'token',
             tokenGetter: (() => localStorage.getItem('token')),
             globalHeaders: [{'Content-Type': 'application/json'}],
             noJwtError: false,
             noTokenScheme: false
           }), http);
          },
        deps: [Http]
       })
     ],      entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})

export class AppModule {

}

最后我的输入文件(main.ts)是这样的:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode, provide } from '@angular/core';
import { Http } from '@angular/http';
import { AuthHttp, AuthConfig } from 'angular2-jwt';
import { AppModule, environment } from './app/';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

因此,当我运行ng-serve(它是一个带有webpack项目的angular-cli)时,我在控制台中收到此错误:

EXCEPTION:错误:路由''的配置无效:必须提供以下其中一项(component或redirectTo或children或loadChildren)

更新代码和新错误

未捕获模块'AppModule'声明的意外值'undefined'

最近更新

似乎桶存在问题.如果我将组件导入到app.module它中,则绕过此错误但给出另一个错误:

uri.match不是一个函数

我当然尝试在路线中添加pathMatch属性,但没有任何变化.

Answer 1

毕竟我的问题很简单(试了很多个小时).

解决方案: 不要从桶中 导入组件直接从其文件夹中导入它们.

这解决了我的问题.

更新:

还有关于undefined错误的问题是我的所有组件都没有imports在app.module中声明.