Angular 2 RC5 & @angular/router 3.0.0-rc.1 Неверная конфигурация или ошибка?

В этом случае я сталкиваюсь с этой проблемой, используя RC5 Angular 2 и последний маршрутизатор.

Мой файл 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 (это angular -cli с проектом webpack), я получаю эту ошибку в консоли:

ИСКЛЮЧЕНИЕ: Ошибка: неверная конфигурация маршрута '': необходимо предоставить один из следующих компонентов (компонент или redirectTo или дети или loadChildren)

КОД ОБНОВЛЕНИЯ И НОВАЯ ОШИБКА

Непринято Неожиданное значение 'undefined', объявленное модулем 'AppModule'

ПОСЛЕДНЕЕ ОБНОВЛЕНИЕ

Кажется, что есть проблема с бочками. Если я импортирую компоненты в app.module, он обходит эту ошибку, но дает другую:

uri.match не является функцией

Я пытался, конечно, добавить атрибут pathMatch в маршруты, но ничего не изменилось.

Ответы

Ответ 1

Моя проблема была довольно простой (пробовал столько часов).

Решение: Не импортировать компоненты из бочек Импортируйте их непосредственно из своих папок.

Это решило мою проблему.

Update:

Также о ошибке undefined была проблема в том, что не все мои компоненты были объявлены в imports приложения .module.

Ответ 2

Импорт для AppModule имеет дубликаты объявлений RoutingModule. Также нет необходимости импортировать CommonModule, поскольку он уже экспортирован BrowserModule.

Попробуйте изменить импорт:

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

Для этого:

imports: [
    BrowserModule,
    routing,
    FormsModule
 ],

Ответ 3

Для кого-то еще есть эта проблема, если вы определяете маршрут для компонента и затем определяете свой компонент в нижней части страницы, он выдает эту ошибку.

В основном, эта ошибка означает, что предоставленный компонент для маршрута undefined.

Поэтому переместите класс компонента перед маршрутами или импортируйте его, убедитесь, что он был импортирован правильно.

Ответ 4

Я считаю, что ваш выбор неверен. Вам нужно импортировать маршруты.

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

И вместо создания RouterConfig,

const routes: RouterConfig = []

Вместо этого используйте маршруты.

const appRoutes: Routes = []

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

Ответ 5

Вам не нужно импортировать эти

provideRouter, RouterConfig

и не требуется этот код

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

и

appRouterProviders,

вместо этого измените тип маршрутов на Маршруты, необходимые для импорта

что он.