如何解决角路由:路由始终重定向到404页面
我试图在Web应用程序上创建404页面,所以我创建了组件并将路由添加到app-rouging.module.ts中,但是即使输入“ / home”,网站也始终重定向到404页面”。
未找到的组件位于public模块中,并附加到未找到的模块上:
import { NgModule } from '@angular/core';
import { SharedModule } from 'src/app/shared/shared.module';
import { NotFoundComponent } from './not-found/not-found.component';
@NgModule({
declarations: [NotFoundComponent],imports: [
SharedModule
]
})
export class NotFoundModule { }
public.module.ts:
import { NgModule } from '@angular/core';
import { PublicRoutingModule } from './public-routing.module';
import { SharedModule } from '../shared/shared.module';
import { MainPageComponent } from './main-page/main-page.component';
import { CookieInformationComponent } from './cookie-information/cookie-information.component';
import { LegaleInformationComponent } from './legale-information/legale-information.component';
import { MapComponent } from './map/map.component';
import { AgmCoreModule } from '@agm/core';
import { InnerHTMLComponent } from './inner-html/inner-html.component';
import { NotFoundModule } from './not-found/not-found.module';
@NgModule({
declarations: [MainPageComponent,CookieInformationComponent,LegaleInformationComponent,MapComponent,InnerHTMLComponent],imports: [
SharedModule,PublicRoutingModule,AgmCoreModule,NotFoundModule
]
})
export class PublicModule { }
我有3个用于路由的文件:应用程序路由,私有路由和公共路由:
app-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { NotFoundComponent } from './public/not-found/not-found/not-found.component';
const APP_ROUTES: Routes = [
{ path: '',redirectTo: '/home',pathMatch: 'full' },{ path: '**',component: NotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(APP_ROUTES)],exports: [RouterModule]
})
export class AppRoutingModule { }
public-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { MainPageComponent } from '../public/main-page/main-page.component'
import { LegaleInformationComponent } from './legale-information/legale-information.component';
import { CookieInformationComponent } from './cookie-information/cookie-information.component';
const APP_ROUTES_PUBLIC: Routes = [
{ path: 'home',component: MainPageComponent },{ path: 'legal',component: LegaleInformationComponent },{ path: 'cookie',component: CookieInformationComponent }
];
@NgModule({
imports: [RouterModule.forChild(APP_ROUTES_PUBLIC)],exports: [RouterModule]
})
export class PublicRoutingModule { }
private-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { AdminComponent } from './admin/admin/admin.component';
import { UploadFileComponent } from './admin/upload-file/upload-file.component';
import { QRCreateComponent } from './admin/qr-code-management/create/create.component';
import { QRUpdateComponent } from './admin/qr-code-management/update/update.component';
const APP_ROUTES_PRIVATE: Routes = [
{ path: 'admin',component: AdminComponent },{ path: 'admin/upload-file',component: UploadFileComponent },{ path: 'admin/qr-code-management/create',component: QRCreateComponent },{ path: 'admin/qr-code-management/update',component: QRUpdateComponent }
];
@NgModule({
imports: [RouterModule.forChild(APP_ROUTES_PRIVATE)],exports: [RouterModule]
})
export class PrivateRoutingModule {
解决方法
查看您的应用程序路由模块声明:
const APP_ROUTES: Routes = [
{ path: '',redirectTo: '/home',pathMatch: 'full' },{ path: '**',component: NotFoundComponent }
];
如果有人去,例如“ http:// localhost:3000 /”,则将其重定向到“ http:// localhost:3000 / home”。但是您没有“本地”路径的路由声明,因此路由器将显示NotFoundComponent
。
您需要为“ home”路径添加声明。例如:
const APP_ROUTES: Routes = [
{ path: '',{ path: 'home',loadChildren: () => import('./public.module').then(m => m.PublicModule) },component: NotFoundComponent }
];
注意1:,您需要在PublicModule中使用path: ''
进行路由才能使其正常运行。可能您必须将路径“ home”更改为简单的空路径。
注意2:我假设您要延迟加载模块。您可以阅读以下内容:https://angular.io/guide/lazy-loading-ngmodules
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。