Currently, I am facing an issue with my Angular 2 router module. Whenever I try to access the link /city, I encounter an error message saying 'ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet Error: Cannot activate an already activated outlet'
Interestingly, I can still manually open this link
Here is the code for: Router module
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) AppModule
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>
<router-outlet></router-outlet>
</div>