Question

我试图在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 {

Answer 1

查看您的应用程序路由模块声明：

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: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', 
    loadChildren: () => import('./public.module').then(m => m.PublicModule) },
  { path: '**', component: NotFoundComponent }
];

注意1：，您需要在PublicModule中使用path: ''进行路由才能使其正常运行。可能您必须将路径“ home”更改为简单的空路径。

注意2：我假设您要延迟加载模块。您可以阅读以下内容：https://angular.io/guide/lazy-loading-ngmodules

角路由：路由始终重定向到404页面

1 个答案: