Angular 2.0 模块“AppModule”导入的意外值“[object Object]”

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
]

Answer 3

  app.menurouting.ts
export  const menurouting:Routes=[{path:'',redirectTo:'menu',pathMatch:'full'},
          {path:'restarenttype',component:RestaurantTypeComponentComponent},
           {path:'table',component:TablelayoutComponent},
          {path:'blog',component:ViewmenuComponent},
        ];
        export  const routes:ModuleWithProviders=RouterModule.forRoot(menurouting)

    app.module.ts

    import {routes} from './app.menurouting';

    @NgModule({
      declarations: [
        AppComponent,
        LoginComponentComponent,
        TablelayoutComponent,
        ViewmenuComponent,
        RestaurantTypeComponentComponent
      ],
      imports: [
        BrowserModule,
        routes
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Answer 4

Be sure that modules are properly defined as @NgModule and watch out for the spelling of your classes to make sure they match up.

Please note that this is as of the Final release of Angular 2.

Also see this thread for additional discussion: Angular 2 Release "Unexpected value 'ElementRef' imported by the module"