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

Question

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 1

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.

Answer 2

Your imports for the AppModule has duplicates RoutingModule declarations. Also there is no need to import CommonModule as it is already exported by the BrowserModule.

Try to change your imports from:

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

To this:

imports: [
    BrowserModule,
    routing,
    FormsModule
 ],

Answer 3

For anyone still have this problem, if you define a route for a component and then define your component at the bottom of the page, it throws this error.

Basically , this error means the provided component for the route is undefined .

So move the component class to be before the routes or if your importing it , make sure it's been imported correctly.

Answer 4

I believe your casting your routes wrong. You need to import Routes.

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

And instead of creating a RouterConfig,

const routes: RouterConfig = []

Use Routes instead.

const appRoutes: Routes = []

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

Answer 5

You don't need to import these

provideRouter, RouterConfig

nor required this code

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

and

appRouterProviders,

instead change the type of routes to Routes which is required to import

that's it.