Encountered an error while attempting to route my app:
metadata_resolver.js:972 Uncaught
SyntaxError {__zone_symbol__error: Error: Unexpected value '[object Object]' imported by the module 'AppModule' at SyntaxError.Zone……}
app.component.html
<div class='container-fluid form-inline'>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span id='title' class='btn btn-primary input-group'><b>{{title}}</b></span>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<b> Menu</b>
</button>
<!-- search box start-->
<div id="search" class="input-group col-xs-6 pull-right form-inline">
<input type="text" class=" search-query form-control" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class=" glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<!-- search box End -->
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"><b>Home</b></a></li>
<li><a href="about.html"><b>All Events</b></a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="calendar.html"><b>Events</b> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="tag.html">Categories</a></li>
</ul>
</li>
<li><a href="services.html"><b>Create Event</b></a></li>
</ul>
</div>
</div>
</nav>
</div>
<br><br><br><br>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-6'>
<router-outlet></router-outlet>
<div *ngFor='let event of events'>
<EventThumbnailComponent [event2]="event" (eventClick)='handleEventClicked($event)'>Hello</EventThumbnailComponent></div></div></div>
<button class='btn btn-primary' (click)="triggerAlert()">alert id</button>
<button class='btn btn-primary' (click)='triggerClickMe()'>click me!</button>
</div>
app.modules.ts
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 { }
routes.ts
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);
Seeking understanding regarding the encountered error and the significance of Zone_symbol_error. Looking for guidance on how to resolve this issue within the provided code.