儿童路由不工作，应用程序重定向到 404 页面 [英] Children routing not working and application redirects to the 404 page

问题描述

我创建了一个 Angular 应用程序版本 7，项目结构是这样的.app 模块有 app-routing.module.ts，dashboard 模块有dashboard-routing module.ts.在仪表板模块中，布局组件路由有子组件，即 home 和 admin.

这是我的代码:

应用模块

import { AppRoutingModule } from './app-routing.module';从'./dashboard/dashboard.module'导入{DashboardModule}；从 './app.component' 导入 { AppComponent };从 './login/login.component' 导入 { LoginComponent };import { PageNotFoundComponent } from './page-not-found/page-not-found.component';@NgModule({声明: [应用组件，登录组件，页面未找到组件],进口:[浏览器模块，应用路由模块，仪表板模块],提供者:[]，引导程序:[AppComponent]})导出类 AppModule { }

应用路由模块:

import { NgModule } from '@angular/core';从'@angular/router' 导入 { Routes, RouterModule };从 './login/login.component' 导入 { LoginComponent };import { PageNotFoundComponent } from './page-not-found/page-not-found.component';const 路由:路由 = [{ 路径:'登录'，组件:LoginComponent }，{路径:''，重定向到:'仪表板'，路径匹配:'完整'}，{ 路径:'**'，组件:PageNotFoundComponent }];@NgModule({进口:[RouterModule.forRoot(routes)]，出口:[路由器模块]})导出类 AppRoutingModule { }

仪表板模块文件:

import { NgModule } from '@angular/core';从'@angular/common'导入{CommonModule}；从 './layout/layout.component' 导入 { LayoutComponent };从 './home/home.component' 导入 { HomeComponent };从 './admin/admin.component' 导入 { AdminComponent };从'./dashboard-routing.module'导入{DashboardRoutingModule}；@NgModule({声明: [LayoutComponent, HomeComponent, AdminComponent],进口:[通用模块，仪表板路由模块]})导出类 DashboardModule { }

仪表板路由模块.

import { NgModule } from '@angular/core';从'@angular/common'导入{CommonModule}；从'@angular/router' 导入 { Routes, RouterModule };从 './layout/layout.component' 导入 { LayoutComponent };从 './home/home.component' 导入 { HomeComponent };从 './admin/admin.component' 导入 { AdminComponent };const 仪表板路由:路由 = [{路径:'仪表板'，组件:布局组件，孩子们: [{ path: '', redirectTo: 'home', pathMatch: 'full' },{ path: 'home', 组件: HomeComponent },{ 路径:'admin'，组件:AdminComponent}]}];@NgModule({声明:[]，进口:[通用模块，RouterModule.forChild(dashboardRoutes)],出口:[路由器模块]})导出类 DashboardRoutingModule { }

问题是我想路由到 localhost:4200 上的仪表板布局，但它总是在每条路由上转到 pageNotFound 组件路由.谁能指出是什么问题.

StackBlitz 上的代码:

解决方案

路由器会按照你导入的顺序匹配你的路由，因此，如果你添加通配符/** 来匹配 appModule 开头的所有路由，它会先匹配这条路由，然后再检查你的其他路由是否匹配.

扩展示例 - 路由器将运行所有定义的路由，直到找到匹配项，如果您从捕获所有开始，它将停止并不再继续.因此，在模块的开头(appRoutes)定义一个catch all 是一个问题.

您的仪表板模块会导入您的仪表板路由，因此在应用模块中导入仪表板模块将决定何时导入仪表板路由.

您需要按照您认为会匹配的顺序导入您的路由，并保留最后添加的通配符.这应该始终是使用通配符的后备.

路由 的文档中有关于此的精彩部分.

如果还有什么不清楚的，请随时发表评论，我会相应地更新我的答案.

亲切的问候克里斯

I have created an angular application version 7 and project structure is like this. app module have app-routing.module.ts and dashboard module have dashboard-routing module.ts. In dashboard module, the layout component route has child components namely home and admin.

Here is my code:

AppModule

import { AppRoutingModule } from './app-routing.module';
import { DashboardModule } from './dashboard/dashboard.module';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DashboardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App-routing module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

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

dashboard module file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LayoutComponent } from './layout/layout.component';
import { HomeComponent } from './home/home.component';
import { AdminComponent } from './admin/admin.component';
import { DashboardRoutingModule } from './dashboard-routing.module';

@NgModule({
  declarations: [LayoutComponent, HomeComponent, AdminComponent],
  imports: [
    CommonModule,
    DashboardRoutingModule
  ]
})
export class DashboardModule { }

dashboard-routing module.

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

import { LayoutComponent } from './layout/layout.component';
import { HomeComponent } from './home/home.component';
import { AdminComponent } from './admin/admin.component';


const dashboardRoutes: Routes = [
  {
    path: 'dashboard',
    component: LayoutComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent },
      { path: 'admin', component: AdminComponent}
    ]
  }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(dashboardRoutes)
  ],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

Problem is I want to route to dashboard layout on localhost:4200 but it is always going to pageNotFound component route on every route. Can anyone point out what is the issue.

Code on StackBlitz:

https://stackblitz.com/github/Ahsan9981/authGuardApp

Desired output

解决方案

The router will match your routes in the sequence you import them, therefore, if you add a wildcard /** to match all routes in the beginning of your appModule, it will match to this route before checking if any of your other routes match it.

To expand on the example - The router will run through all defined routes until it finds a match, if you begin with a catch all, it will stop there and go no further. Therefore it will be a problem to define a catch all in the beginning of your module (the appRoutes).

Your dashboard module imports your dashboard routes, therefore importing dashboard module in app module will determin when your dashboard routes are imported.

You need to import your routes in the sequence you think it will match, and leave the wildcards to be added lastly. This should always be a fallback with wildcards.

There is an excillent section on this in the documentation for routing.

If there is still something unclear, feel free to comment and i will update my answer accordingly.

Kind regards Chris

这篇关于儿童路由不工作，应用程序重定向到 404 页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！