Error: Uncaught (in promiseError: Cannot match any routes

Question

Routing Error . Please help!! Here are the files

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatGridListModule } from '@angular/material/grid-list';
import { RouterModule, Routes } from '@angular/router';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatListModule } from '@angular/material/list';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

import 'hammerjs';
import { HeaderComponent } from './header/header.component';
import { MatSidenavModule } from '@angular/material/sidenav';
import { SearchCitiesComponent } from './search-cities/search-cities.component';
import { AppRoutingModule } from './app-routing/app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SearchCitiesComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    FlexLayoutModule,
    MatIconModule,
    MatSlideToggleModule,
    MatSidenavModule,
    MatButtonModule,
    MatCardModule,
    MatGridListModule,
    RouterModule,
    MatInputModule,
    MatSelectModule,
    MatFormFieldModule,
    MatListModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

header.component.html

<mat-toolbar color="primary">
    <button mat-button (click)="side_nav.open()">

        <mat-icon>menu</mat-icon>
    </button>
    <img src="../assets/weather_images/logo.png" style="width: 35px;">&nbsp;&nbsp;&nbsp;&nbsp;
    <span> Minimus </span>
    <span class="header_text"></span>
    <span>TODAY</span>
    <span class="header_text"></span>
    <span>light</span>&nbsp;&nbsp;&nbsp;&nbsp;
    <mat-slide-toggle [checked]="isDarkTheme | async" (change)="toggleDarkTheme($event.checked)"></mat-slide-toggle>&nbsp;&nbsp;&nbsp;&nbsp;
    <span>dark</span>
</mat-toolbar>
<mat-sidenav-container>
    <mat-sidenav #side_nav>
        start
    </mat-sidenav>

    <mat-sidenav-content class="sidenav_content"><br><br><br>
        <div fxLayout="column" fxLayout.xs="column">

            <mat-grid-list cols="2" [ngClass]="{'dark-theme': isDarkTheme | async}">
                <mat-grid-tile>
                    <mat-card class="card_style" [ngClass]="{'dark-theme': isDarkTheme | async}" (click)="navigate()">
                        <mat-card-title class="card_title" [ngClass]="{'dark-theme': isDarkTheme | async}">ADD CITY</mat-card-title><br>

                        <img src="../assets/weather_images/plus.png" alt="Plus image" width="150px" class="image_style">
                        <img mat-card-image src="../assets/weather_images/1.png" height="260px">

                    </mat-card>

                </mat-grid-tile>
                <mat-grid-tile>
                    <mat-card class="card_style">
                        <mat-card-title class="card_title">ADD CITY</mat-card-title><br>

                        <img src="../assets/weather_images/plus.png" alt="Plus image" width="150px" class="image_style">
                        <img mat-card-image src="../assets/weather_images/1.png" height="260px">

                    </mat-card>

                </mat-grid-tile>


            </mat-grid-list>
        </div>
    </mat-sidenav-content>

</mat-sidenav-container>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { routes } from './routes';

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

routes.ts

import { Routes } from '@angular/router';

import { SearchCitiesComponent } from '../search-cities/search-cities.component';

export const routes: Routes = [
    {path: 'search-cities', component: SearchCitiesComponent},
    {path: '',redirectTo: '/header',pathMatch: "full"}
];

search-citites.component.html

import { Routes } from '@angular/router';

import { SearchCitiesComponent } from '../search-cities/search-cities.component';

export const routes: Routes = [
    {path: 'search-cities', component: SearchCitiesComponent},
    {path: '',redirectTo: '/header',pathMatch: "full"}
];

search-cities.component.ts

import { Component, OnInit } from '@angular/core';
import { WeatherService } from '../services/weather.service';


@Component({
  selector: 'app-search-cities',
  templateUrl: './search-cities.component.html',
  styleUrls: ['./search-cities.component.scss']
})
export class SearchCitiesComponent implements OnInit {

  constructor(private weathersService: WeatherService) { }
  cities: Array<any>;
  temp: Array<any>;
  name='';
  ngOnInit() {
  }

  searchCity(){
    this.weathersService.getcities(this.name).subscribe(data => this.cities = data['weather']);
    this.weathersService.getcities(this.name).subscribe(data => this.temp = data['main']);
    }
}

app.component.html

<div [ngClass]="{'dark-theme': isDarkTheme | async}">
    <div class="mat-app-background">
        <app-header></app-header>
        <router-outlet></router-outlet>
        <div class="content">
        </div>
    </div>
</div>

Showing an error in routing . It says the following:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'header' Error: Cannot match any routes. URL Segment: 'header' at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:1384) Anyone please help... Cannot understand why ..

You are redirecting to default url 'header' which is not defined. — Gourav Garg
Take a look at the documentation angular.io/guide/router#milestone-1-getting-started. Like @GouravGarg said, you did not define a path with "header" only a redirect that used as a default route. — Lievno

braunpa braunpa · Accepted Answer · 2020-04-06T06:10:24

I can not find your header route definition in the code. If you want to route to your root Component use the following Code in your app-routing.module.ts

{ 
  path: 'header',
  component: <YourComponent>,
}

Than you are good to go. If you want my advice: Please do not use "br" in your mat-sidenav-content Element. It's better to use margin-top or even padding-top.

If you are using Subject (in your Service) in more than one or two components it's getting very hard to manage the data. Maybe you will read something about StateManagement (ngrx -- https://ngrx.io/ ) it's a JavaScript Object which will hold the whole application data. But anyway Subscription is good as well.

Cheers

Error: Uncaught (in promiseError: Cannot match any routes

1 Answers