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

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

提问by Guy Gallant

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'

当我尝试加载我的 angular 2.0 应用程序时，我收到以下错误：（索引）：21 错误：错误：模块“AppModule”导入的意外值“[object Object]”

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.

如果我从导入中删除“路由”，登录页面会加载但没有任何错误。我怀疑路由中的错误，因为如果我删除 AppModule 中的“路由”，登录页面会正确加载。我尝试了许多更改，但我无法确定问题的原因。任何帮助，将不胜感激。

回答by galvan

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 routedComponentsfrom the module declarationsarray and it will solve your issue.

问题是您将 routedComponents 设置为声明的一部分。由于这不是指令、组件或管道，因此您会收到此异常。从模块声明数组中删除routedComponents，它将解决您的问题。

回答by MAN

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

只需从导入数组中删除“路由”并向其添加“路由”：

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
]

回答by sudheer nunna

  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 { }

回答by Richard Nalezynski

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

确保模块被正确定义为@NgModule并注意类的拼写以确保它们匹配。

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

请注意，这是 Angular 2 的最终版本。

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

另请参阅此线程以获取更多讨论： Angular 2 Release "Unexpected value 'ElementRef'imported by the module"