Vassilis Pits Vassilis Pits - 3 months ago 555
TypeScript Question

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

In this case I encounter this issue using RC5 of Angular 2 and latest router.

My routes.ts file is this:

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);


And my app.module.ts file (bootstrap) is this:

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 {

}


And finally my entry file (main.ts) is this:

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);


So when I'm running the
ng-serve
(it's an angular-cli with webpack project) Im getting this error in console:


EXCEPTION: Error: Invalid configuration of route ' ': one of the following must be provided (component or redirectTo or children or loadChildren)


UPDATE CODE AND NEW ERROR


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


LATEST UPDATE

It seems that there is an issue with the barrels. If I import the components to the
app.module
it by-pass this error but giving an other one:


uri.match is not a function


I tried of course to add the
pathMatch
attribute in routes but nothing changes.

Answer

My problem was quite simple after all (tried so many hours).

Solution: Do not import components from barrels Import them directly from their folders.

That solved my problem.

Update:

Also about the undefined error the problem was that not all of my components was declared in the imports of the app.module.

Comments