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: Error: Invalid configuration of route ' ': one of the following must be provided (component or redirectTo or children or loadChildren)

更新代码和新错误

Uncaught Unexpected value 'undefined' declared by the module 'AppModule'

最新更新

桶好像有问题。如果我将组件导入 app.module 它会绕过此错误但给出另一个错误：

uri.match is not a function

我当然尝试在路由中添加 pathMatch 属性，但没有任何变化。

Answer 1

我相信你选错了路线。您需要导入路由。

import { Routes,provideRouter, RouterConfig, RouterModule '@angular/router';

而不是创建 RouterConfig，

const routes: RouterConfig = []

改用路由。

const appRoutes: Routes = []

https://angular.io/docs/ts/latest/guide/router.html

Answer 2

你不需要导入这些

provideRouter, RouterConfig

也不需要此代码

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

和

appRouterProviders,

改为将路由类型更改为需要导入的路由

就是这样。

Answer 3

毕竟我的问题很简单（试了这么多小时）。

解决方法： 不要从桶中导入组件 直接从它们的文件夹中导入它们。

这解决了我的问题。

更新：

关于 undefined 错误，问题是并非我的所有组件都在 app.module 的 imports 中声明。

Answer 4

您的 AppModule 导入具有重复的 RoutingModule 声明。也不需要导入 CommonModule，因为它已经由 BrowserModule 导出。

尝试更改您的进口自：

imports: [
    BrowserModule,
    CommonModule,
    // Router
    RouterModule,
    routing,
    // Forms
    FormsModule,
 ],

为此：

imports: [
    BrowserModule,
    routing,
    FormsModule
 ],

Answer 5

对于仍然有此问题的任何人，如果您为组件定义路由，然后在页面底部定义您的组件，则会抛出此错误。

基本上，此错误意味着为路由提供的组件未定义。

所以将组件 class 移动到路由之前，或者如果您导入它，请确保它已正确导入。

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

Angular 2 RC5 & @angular/router 3.0.0-rc.1 Invalid configuration or a bug?

angular

typescript

webpack

angular2-routing

angular-cli