title: Routing syntax error zone symbol error angular 2
body: <p>I am getting the below error while trying route my app :</p>
  
  <pre><code>metadata_resolver.js:972 Uncaught 
  SyntaxError {__zone_symbol__error: Error: Unexpected value '[object Object]' imported by the module 'AppModule' at SyntaxError.Zone……}
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;div class='container-fluid form-inline'&gt;
     &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;span id='title' class='btn btn-primary input-group'&gt;&lt;b&gt;{{title}}&lt;/b&gt;&lt;/span&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
             &lt;b&gt; Menu&lt;/b&gt;
            &lt;/button&gt;
            &lt;!-- search box start--&gt;
  
            &lt;div id="search" class="input-group col-xs-6 pull-right form-inline"&gt;
                &lt;input type="text" class="  search-query form-control" placeholder="Search" /&gt;
                &lt;span class="input-group-btn"&gt;
                    &lt;button class="btn btn-primary" type="button"&gt;
                        &lt;span class=" glyphicon glyphicon-search"&gt;&lt;/span&gt;
                    &lt;/button&gt;
                &lt;/span&gt;
            &lt;/div&gt;
  
            &lt;!-- search box End --&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;&lt;b&gt;Home&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="about.html"&gt;&lt;b&gt;All Events&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                &lt;a class="dropdown-toggle" data-toggle="dropdown" href="calendar.html"&gt;&lt;b&gt;Events&lt;/b&gt; &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="tag.html"&gt;Categories&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="services.html"&gt;&lt;b&gt;Create Event&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;div class='container-fluid'&gt;
  &lt;div class='row'&gt;
      &lt;div  class='col-md-6'&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;    
  
  &lt;div *ngFor='let event of events'&gt;
      &lt;EventThumbnailComponent [event2]="event" (eventClick)='handleEventClicked($event)'&gt;Hello&lt;/EventThumbnailComponent&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;button class='btn btn-primary' (click)="triggerAlert()"&gt;alert id&lt;/button&gt;
      &lt;button class='btn btn-primary' (click)='triggerClickMe()'&gt;click me!&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.modules.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  
  import { AppComponent } from './app.component';
  import { EventListComponent } from './event-list/event-list.component';
  import { EventThumbnailComponent } from './event-thumbnail/event-thumbnail.component';
  import { EventsService } from './shared/events.service';
  import { EventDetailsComponent } from './event-details/event-details.component';
  import { RouterModule, Routes } from '@angular/router';
   import { appRoutes } from './routes';
  
  @NgModule({
    declarations: [
      AppComponent,
      EventListComponent,
      EventThumbnailComponent,
      EventDetailsComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      appRoutes
    ],
    providers: [EventsService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>routes.ts</strong></p>
  
  <pre><code>import { Routes,RouterModule } from '@angular/router';
  import { ModuleWithProviders } from '@angular/core';
  import { EventListComponent } from './event-list/event-list.component';
  import { EventDetailsComponent } from './event-details/event-details.component';
  
  export const router: appRoutes=[
     { path:'events', component :EventListComponent },
      { path:'events/:id', component :EventDetailsComponent },
      { path: '' , redirectsTo : '/events' , pathMatch: 'full' }
      ];
  
      export const router: ModuleWithProviders= RouterModule.forRoot(router);
  </code></pre>
  
  <p>I don't understand why I am getting the above error and what is the meaning of Zone_symbol_error. I want to know what this means and how to resolve it for the above code.</p>