Question

我正在构建一个Angular 6应用，其中包含来自功能模块的子路线，但是当我导航到任何子路线时，都会击中应用模块中定义的404路线。

我的应用程序路由如下：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '../core/containers/home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
];

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

我的孩子路线如下：

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

import { DevelopmentHomeComponent } from './containers/development-home/development-home.component';

const routes: Routes = [
  {
    path: 'development',
    children: [
      { path: '', component: DevelopmentHomeComponent },
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    DevelopmentHomeComponent
  ],
})
export class DevelopmentModule { }

当我导航到/development时，将呈现404组件而不是DevelopmentHomeComponent。为什么会这样？

我看过this post，但没有解决方案。评论建议将所有路线合并为一条，但我不想采用这种方法。

我也看过this post，但我又不想采用这种方法。

我一直在看Todd Motto的source code for his Angular training，但看不到我的代码和他的代码之间的任何区别。

导航到子路线时击中404组件

0 个答案: