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.

Which version of angular2 are you using? why do you need this for?? `export const routedComponents = [searchComponent, landingComponent];`. I am also new to angular2 and I am working on routing. I am using final version of angular2 and I dont initialize the above statement like you did. — Pradeepb, Sep 24 '16 at 22:59
I've the same error when trying to load a module with moduleWithProviders... — Han Che, Sep 26 '16 at 13:36
Sorry forgot to mention the most basic info: "@angular/common": "2.0.1", — Guy Gallant, Sep 26 '16 at 15:05
The constant is not currently used. Even if I remove it from AppModule I get the same error — Guy Gallant, Sep 26 '16 at 15:10
are you using webpack beta 2? If so please be aware that there are some issues involved this topic. — Han Che, Sep 26 '16 at 16:08

score 11 · Answer 1 · answered Jan 12 '17 at 21:22

11

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.

answered Jan 12 '17 at 21:22

galvan

6,848
7
32
52

score 3 · Answer 2 · edited Apr 18 '17 at 15:40

3

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

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
]

edited Apr 18 '17 at 15:40

Ḟḹáḿíṅḡ Ⱬỏḿƀíé

2,093
5
21
32

answered Apr 18 '17 at 12:45

MAN

305
3
10

score -2 · Answer 3 · edited May 23 '17 at 12:25

-2

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"

edited May 23 '17 at 12:25

Community

1
1

answered Oct 19 '16 at 23:55

Richard Nalezynski

571
6
11

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

3 Answers3