Angular新增带路由的SearchModule无效，已有模块正常

简而言之：在我的案例中，我需要调整AppModule中的模块导入顺序，将SearchModule放在AppRoutingModule之前导入。
但更好的解决方案是使用懒加载（LazyLoading），不在AppModule中导入页面模块。

我正尝试在Spring Pet Clinic Angular项目中添加一个带子路由的新模块，但添加后无法正常工作。对比所有已有的带路由模块，未发现明显差异。

我创建模块的步骤如下：

• ng g m search --routing
• 在app组件中添加routerLink
• ng g c search/search dashboard
• 在search-routing-module.ts中添加search路由
• 将SearchModule添加到AppModule中

访问该链接时，只能看到标准的404错误页面。奇怪的是，将路由添加到owner路由模块时能正常工作，但新创建的SearchModule无法运行。

search.module.ts #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SearchRoutingModule } from './search-routing.module';
import { SearchDashboardComponent } from './search-dashboard/search-dashboard.component';


@NgModule({
  declarations: [
    SearchDashboardComponent
  ],
  imports: [
    CommonModule,
    SearchRoutingModule
  ]
})
export class SearchModule { }

search-routing-module.ts #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SearchDashboardComponent } from './search-dashboard/search-dashboard.component';

const routes: Routes = [
  {path: 'search', component: SearchDashboardComponent}
];

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

app.module.ts #

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {OwnersModule} from './owners/owners.module';
import {PetsModule} from './pets/pets.module';
import {VisitsModule} from './visits/visits.module';
import {PetTypesModule} from './pettypes/pettypes.module';
import {VetsModule} from './vets/vets.module';
import {PartsModule} from './parts/parts.module';
import {SpecialtiesModule} from './specialties/specialties.module';
import {HttpErrorHandler} from './error.service';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {SearchModule} from './search/search.module';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    OwnersModule,
    PetsModule,
    VisitsModule,
    PetTypesModule,
    VetsModule,
    SpecialtiesModule,
    PartsModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    SearchModule
  ],
  providers: [
    HttpErrorHandler,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.html #

<router-outlet></router-outlet>

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