Angular 8路由导航异常：组件内容不显示问题求助

我帮你找到了问题的核心所在，咱们一步步来排查和解决：

核心问题：路由模块导入顺序错误 #

你当前的AppModule里，AppRoutingModule（包含通配符**路由）是在ClientModule之前导入的。Angular会按照模块导入的顺序合并路由配置，而通配符路由**会匹配任何未被前面路由匹配的路径。这就导致当你访问/blogs、/about这类客户端路由时，会被AppRoutingModule里的**路由优先匹配，加载PageNotFoundComponent（如果这个组件没有内容，页面就只会显示footer）。

直接解决方案：调整模块导入顺序 #

修改AppModule的imports数组，把ClientModule移到AppRoutingModule前面，确保客户端路由先被匹配：

// app.module.ts
imports: [
  BrowserModule,
  HttpClientModule,
  ClientModule, // 移到AppRoutingModule之前
  AppRoutingModule
],

额外优化建议 #

1. 修正无效的空路由配置 #

你的AppRoutingModule里的空路由重定向是无效的，可以删除或者调整为合理配置：

// app-routing.module.ts
const routes: Routes = [
  // 这个重定向无意义，建议删除
  // {path: '', redirectTo: '', pathMatch: 'full'},
  {path: '**', component: PageNotFoundComponent}
];

2. 把首页组件整合到ClientModule中 #

目前首页的HomeComponent和FeaturedBlogComponent是在AppModule里声明的，建议把它们移到ClientModule中，保持模块职责单一：

• 首先在client.module.ts中添加这两个组件的声明：

// client.module.ts
import { CommonModule } from '@angular/common';
import { ClientRoutingModule } from './client-routing.module';
import { BlogListComponent } from '../blog-list/blog-list.component';
import { BlogDetailComponent } from '../blog-detail/blog-detail.component';
import { AboutComponent } from '../about/about.component';
import { ContactComponent } from '../contact/contact.component';
import { HomeComponent } from '../home/home.component'; // 新增导入
import { FeaturedBlogComponent } from '../featured-blog/featured-blog.component'; // 新增导入

@NgModule({
  declarations: [
    BlogListComponent, 
    BlogDetailComponent, 
    AboutComponent, 
    ContactComponent,
    HomeComponent, // 新增声明
    FeaturedBlogComponent // 新增声明
  ],
  imports: [
    CommonModule,
    ClientRoutingModule
  ]
})
export class ClientModule { }

• 然后在ClientRoutingModule中添加首页路由（如果需要同时显示两个组件，建议合并成一个首页组件或使用子路由）：

// client-routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { BlogListComponent } from '../blog-list/blog-list.component';
import { BlogDetailComponent } from '../blog-detail/blog-detail.component';
import { AboutComponent } from '../about/about.component';
import { ContactComponent } from '../contact/contact.component';
import { HomeComponent } from '../home/home.component'; // 新增导入

const routes: Routes = [
  {path: '', component: HomeComponent}, // 首页路由
  {path: 'blogs', component: BlogListComponent},
  {path: 'blog/:_id', component: BlogDetailComponent},
  {path: 'about', component: AboutComponent},
  {path: 'contact', component: ContactComponent}
];

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

3. 简化AppComponent模板 #

移除通过router.url判断显示首页组件的逻辑，直接用router-outlet加载所有路由组件，更符合Angular的路由规范：

<!-- app.component.html -->
<router-outlet></router-outlet>
<app-footer></app-footer>

这样调整后，访问客户端路由时就能正常加载对应的组件了。

内容的提问来源于stack exchange，提问作者chatterjeetridib