Angular 2.0 Unexpected value '[object Object]' imported by the module 'AppModule'

Question

When I try load my angular 2.0 application I get the following error: (index):21 Error: Error: Unexpected value '[object Object]' imported by the module 'AppModule'

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { searchComponent }      from './search.Component'; 
import { landingComponent }     from './landing.Component'; 

export const routes: Routes = [
{
    path: '',
    component: searchComponent
},
{
    path: 'search',
    component: searchComponent
}];
export const routedComponents = [searchComponent, landingComponent];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

AppModule

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';
import { landingComponent }              from './landing.Component'; 
import { searchComponent }               from './search.Component'; 
import { routes, routedComponents }      from './app.routing';
import { homeScript }                    from './Services/homeScript';

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes
],
declarations: [
    landingComponent,
    searchComponent,
    routedComponents
],
providers: [
    homeScript
],
bootstrap: [landingComponent]

})
export class AppModule { }

Type script for booting

///<reference path="./../typings/globals/core-js/index.d.ts"/>
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './appModule';

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(success => console.log(`Bootstrap success`))
  .catch(error => console.log('GUY  ' + error));

If I remove 'routes' from the imports the landing pages loads but without any error. I suspect that the error in in the routing, because if I remove the 'routes' in the AppModule the landing page loads properly. I have tried many changes but I have not been able to identify the cause of the problem. Any help would be appreciated.

Answer 1

The problem is you set routedComponents as part of your declarations. Since this is not a Directive, Component or Pipe you get this exception. Remove the routedComponents from the module declarations array and it will solve your issue.

Answer 2

Just remove "routes" from import array and add "routing" to that:

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
]