Javascript 角度2路由器错误

我创建了Angular 2路由器模块，但它目前不工作，当我想打开link/city时出错错误：未捕获（承诺中）：错误：无法激活已激活的插座 错误：无法激活已激活的插座'

但我可以手动打开此链接

以下是电话号码： 路由器模块

import { NgModule }from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import {WeatherListComponent} from "../weather-list/weather-list.component";
import {AddedCityComponent} from "../added-city/added-city.component";
import {AppComponent} from "../app.component";


const routes: Routes = [
    { path: '', redirectTo: '/weather-list', pathMatch: 'full'},
    { path: 'city', component: AddedCityComponent },
    { path: 'weather-list',  component: WeatherListComponent }

];

@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

2） 应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdButtonModule, MdCheckboxModule, MdCardModule, MdInputModule} from '@angular/material';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { WeatherListComponent } from './weather-list/weather-list.component';

import { WeatherService } from './service/weather.service';
import { WeatherSearchComponent } from './weather-search/weather-search.component';
import { CloudsComponent } from './clouds/clouds.component';
import { SunComponent } from './sun/sun.component';
import { RainComponent } from './rain/rain.component';
import { AddedCityComponent } from './added-city/added-city.component';

import { AppRoutingModule } from './service/app.routing';


@NgModule({
  declarations: [
    AppComponent,
    WeatherListComponent,
    AddedCityComponent,
    WeatherSearchComponent,
    CloudsComponent,
    SunComponent,
    RainComponent


  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule,
    NgbModule.forRoot(),
    AppRoutingModule


  ],
  providers: [
    WeatherService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3） AppComponentHTML

<div class="page-wrapper" [ngClass]="{
                                    'sun-background': weatherDesc == 'Clear',
                                    'rain-background': weatherDesc == 'Rain',
                                    'clouds-background': weatherDesc == 'Clouds'
                                      }">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <header>
          <div class="header-wrapper">
            <h3 class=" text-left">Weather App</h3>
            <a routerLink="/city" routerLinkActive="active">cities</a>
            <a routerLink="/weather-list" routerLinkActive="active">weather</a>
            <app-weather-search></app-weather-search>
          </div>
        </header>
      </div>
    </div>
  </div>
  <!--<app-weather-list (notify)="background($event)"></app-weather-list>-->
  <!--<app-weather-list></app-weather-list>-->
  <router-outlet></router-outlet>

</div>

天气应用程序
删除
/weather list
至
weather list
中的前导斜杠。这将使第一条路径工作，这可能会导致问题。请尝试一下并告诉我。
看起来您的路由链接在组件html中的设置不正确

尝试更改您的链接标签，从

<a routerLink="/city" routerLinkActive="active">cities</a>
<a routerLink="/weather-list" routerLinkActive="active">weather</a>

城市
天气

到

<a [routerLink]="['/city']" routerLinkActive="active">
<a [routerLink]="['/weather-list']" routerLinkActive="active">



您也可以尝试删除路由模块导入中的.forRoot，我不确定在这种情况下是否有必要删除它。
试试看

   const routes: Routes = [

    { path: 'city', component: AddedCityComponent },
    { path: 'weather-list',  component: WeatherListComponent },
    { path: '', redirectTo: '/weather-list', pathMatch: 'full'}

  ];

并将
appRoutingModule
移动到
imports
声明中列表的开头
我发现您的应用程序组件中没有路由器出口。尝试在app.component.html中复制此代码：

<router-outlet></router-outlet>



然后尝试进入以打开链接。
是否使用多个路由出口？