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,
вместо этого измените тип маршрутов на Маршруты, необходимые для импорта
что он.