路由语法错误区符号误差角2

Question

我在尝试路由我的应用程序时会遇到以下错误：

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);

我不明白为什么我会遇到上述错误以及Zone_Symbol_error的含义是什么。我想知道这意味着什么以及如何解决上述代码。

Answer 1

您必须导入配置的router = RouterModule.forRoot(appRoutes)而不是其配置appRoutes：

在您的路由中：ts文件： appRoutes :Routes而不是 router: appRoutes和 RouterModule.forRoot(appRoutes)而不是 RouterModule.forRoot(router)

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  appRoutes :Routes=[
   { path:'events', component :EventListComponent },
    { path:'events/:id', component :EventDetailsComponent },
    { path: '' , redirectsTo : '/events' , pathMatch: 'full' }
    ];
    export const router: ModuleWithProviders= RouterModule.forRoot(appRoutes);

在AppModule中： router代替appRoutes

import { router} from './routes';
@NgModule({
          declarations: [
            AppComponent,
            EventListComponent,
            EventThumbnailComponent,
            EventDetailsComponent
          ],
          imports: [
            BrowserModule,
            FormsModule,
            HttpModule,
            router
          ],
          providers: [EventsService],
          bootstrap: [AppComponent]
        })
        export class AppModule { }