Ошибка: Uncaught (в promiseError: Невозможно найти ни одного маршрута - PullRequest
Новая
       37

Ошибка: Uncaught (в promiseError: Невозможно найти ни одного маршрута

0 голосов
/ 05 апреля 2020

Ошибка маршрутизации. Пожалуйста помоги!! Вот файлы

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 { }

rout.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-towns.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>

Отображение ошибки в маршрутизации. В нем говорится следующее:

Ошибка: ошибка: не найдена (в обещании): ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: «заголовок» Ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: заголовок в ApplyRedirects.pu sh .. / node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router. js: 1384) Любой, пожалуйста, помогите ... Не могу понимаю почему ..

1 Ответ

0 голосов
/ 06 апреля 2020

Не могу найти определение вашего заголовка маршрута в коде. Если вы хотите направить на ваш root компонент, используйте следующий код в вашем app-routing.module.ts 

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

Чем вы хороши для go. Если вам нужен мой совет: пожалуйста, не используйте "br" в вашем элементе mat-sidenav-content. Лучше использовать margin-top или даже padding-top.

Если вы используете Предмет (в своей Службе) в более чем одном или двух компонентах, становится очень трудно управлять данными. Возможно, вы прочтете что-нибудь о StateManagement (ngrx - https://ngrx.io/) - это объект JavaScript, который будет содержать все данные приложения. Но в любом случае подписка также хороша.

Приветствия

...