角度路由：路由总是重定向到 404 页面

Question

我试图在我的 Web 应用程序上创建一个 404 页面，因此我创建了组件并将路由添加到 app-roging.module.ts 但即使我输入“/home”，该网站也总是重定向到 404 页面" 在网址中。

未找到的组件在公共模块中，附加到未找到的模块：

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、private-routing 和 public-routing：

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”。但是你没有'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: '' 路由才能使其工作。可能您必须将路径“家”更改为简单的空路径。

注意 2： 我假设您想延迟加载您的模块。您可以阅读更多相关信息：https://angular.io/guide/lazy-loading-ngmodules