[英]Uncaught (in promise): Error: Cannot match any routes (Angular8)
我制作了我的角度应用程序。 都是好作品。 但是对于部署到服务器我收到错误:
未捕获(承诺):错误:无法匹配任何路线。 URL 段:'myUrl/app.aspx'
在构建 prod 之后,我的应用程序也不起作用(我设置了 base 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 { }
我没有提供者:[{ provide: 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 { }
主路由.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 { }
事件路由.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 { }
我注意到:
构建应用程序后 - 生成的模块文件:存档和事件,但不要为主模块生成文件。
我在app-routing.module.ts 中解决了这个问题。 添加了{ useHash: true } :
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule],
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.