Uncaught (в обещании): ошибка: невозможно сопоставить ни один маршрут (Angular8) - PullRequest
Новая
       32

Uncaught (в обещании): ошибка: невозможно сопоставить ни один маршрут (Angular8)

0 голосов
/ 04 марта 2020

Я сделал мой angular -app. Все хорошо работает. Но при развертывании на сервер я получаю сообщение об ошибке:

Uncaught (в обещании): Ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: 'myUrl / app.aspx'

После сборки продукта мое приложение также не работает (я установил базовый href и все файлы загружаются, но я получаю предупреждение Unhandled Navigation Error ).

Я затрудняю маршрутизацию для своего приложения. Я использовал подмодули для маршрутизации. И я думаю, что проблема связана с APP_BASE_HREF или неправильной маршрутизацией для моего приложения / подмодулей.

Мой пример:

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NbThemeModule, NbLayoutModule, NbSidebarModule, NbButtonModule, NbTabsetModule, NbCardModule } from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '@angular/router';
import { MainModule } from './components/main/main.module';
import { AddModule } from './components/add/add.module';
import { APP_BASE_HREF } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'default' }),
    NbLayoutModule,
    NbEvaIconsModule,
    NbSidebarModule.forRoot(),
    NbButtonModule,
    NbTabsetModule,
    NbCardModule,
    AppRoutingModule,
    MainModule,
    AddModule,
    HttpClientModule,
  ],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

У меня нет провайдеров: [{обеспечить: APP_BASE_HREF, useValue: '/'}] и все хорошо работает. Но для развертывания я получил сообщение об ошибке:

Пожалуйста, укажите значение для токена APP_BASE_HREF или добавьте базовый элемент в документ.

Я добавлю APP_BASE_HREF и ошибка исчезла.

app-routing.module.ts 

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

const routes: Routes = [
  {
    path: '',
    loadChildren: './components/main/main.module#MainModule'
  },
  {
    path: 'event',
    loadChildren: './components/event/event.module#EventModule'
  },
  {
    path: 'add',
    loadChildren: './components/add/add.module#AddModule'
  },
  {
    path: 'archive',
    loadChildren: './components/archive/archive.module#ArchiveModule'
  }
];

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

main-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ViewEventsComponent } from './view-events/view-events.component';

const routes: Routes = [
    {
        path: '',
        component: ViewEventsComponent,
    },
];

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

event-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EventPageComponent } from './event-page/event-page.component';

const routes: Routes = [
    {
        path: ':id',
        component: EventPageComponent,
    },
];

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

И я заметил:

после сборки приложения - сгенерированные файлы модуля: архив и событие , но не генерировать файл для основного модуля.

1 Ответ

0 голосов
/ 05 марта 2020

Я решил эту проблему с исправленным в app-routing.module.ts . A {useHa sh: true} : 

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule],
})
...