Angular adding new Module with routing doesn't work. But already existing Modules work-CodePudding

Im trying to add a new Module with child route to the Spring Pet Clinic Angular.

But when I add a module with routing it doesn't work. I did compare it to all the other modules with routing and I cant find a relevant difference.

What I did to create the Module

ng g m search --routing
added routerLink in app component
ng g c search/search dashboard
added search route to search-routing-module.ts
added the searchmodule to appmodule

but all I get when I go to the link is the standart error page not found.

I did try to add

{path: 'search', component: SearchDashboardComponent}

to the owner routing module and that worked for some reason.

But I cant get it to work from the newly created searchModule.

Did I miss anything or what am I doing wrong?

new 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

<div >

<nav  role="navigation">
  <div >
  <div >
    <a  href="#"><span></span></a>
  </div>

    <ul >
      <li>
        <a routerLink="welcome" title="home page">
          <span  aria-hidden="true"></span>
          <span>Home</span>
        </a>
      </li>

      <li >
        <a  data-toggle="dropdown" role="button"
           aria-haspopup="true" aria-expanded="false">Owners<span ></span>
        </a>
        <ul >
          <li><a routerLink="/owners"><span 
                                            aria-hidden="true"></span><span> Search</span></a></li>
          <li><a routerLink="/owners/add"><span  aria-hidden="true"></span><span> Add New</span></a>
          </li>
        </ul>
      </li>
      <li >
        <a  data-toggle="dropdown" role="button"
           aria-haspopup="true" aria-expanded="false">Veterinarians<span ></span>
        </a>
        <ul >
          <li><a routerLink="/vets"><span  aria-hidden="true"></span><span>All</span></a>
          </li>
          <li><a routerLink="/vets/add"><span 
                                              aria-hidden="true"></span><span> Add New</span></a></li>
        </ul>
      </li>
      <li>
        <a routerLink="/pettypes" routerLinkActive="active" title="pettypes">
          <span  aria-hidden="true"></span>
          <span>Pet Types</span>
        </a>
      </li>
      <li>
        <a routerLink="/specialties" routerLinkActive="active" title="specialties">
          <span  aria-hidden="true"></span>
          <span>Specialties</span>
        </a>
      </li>
      <li>
        <a routerLink="/search" routerLinkActive="active" title="search">
          <span  aria-hidden="true"></span>
          <span>Search</span>
        </a>
      </li>
    </ul>

  </div>
</nav>

</div>



<router-outlet></router-outlet>

<br/>
<br/>
<div >
  <div >
    <div ><img src="./assets/images/angular.png"
                                         alt="Angular" height="80" width="80"/>
      <img src="./assets/images/spring-pivotal-logo.png"
           alt="Sponsored by Pivotal"/></div>
  </div>
</div>

example of already existing owners.module.ts

import {NgModule} from '@angular/core';
import {OwnerService} from './owner.service';
import {OwnerListComponent} from './owner-list/owner-list.component';
import {OwnerDetailComponent} from './owner-detail/owner-detail.component';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {OwnerAddComponent} from './owner-add/owner-add.component';
import {OwnerEditComponent} from './owner-edit/owner-edit.component';
import {OwnersRoutingModule} from './owners-routing.module';
import {PetsModule} from '../pets/pets.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    OwnersRoutingModule,
    PetsModule
  ],
  declarations: [
    OwnerListComponent,
    OwnerDetailComponent,
    OwnerEditComponent,
    OwnerAddComponent
  ],
  providers: [OwnerService]

})

export class OwnersModule {
}

example of already existing owners-routing.module.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {OwnerDetailComponent} from './owner-detail/owner-detail.component';
import {OwnerListComponent} from './owner-list/owner-list.component';
import {OwnerEditComponent} from './owner-edit/owner-edit.component';
import {OwnerAddComponent} from './owner-add/owner-add.component';
import {PetAddComponent} from '../pets/pet-add/pet-add.component';

const ownerRoutes: Routes = [
  {path: 'owners', component: OwnerListComponent},
  {path: 'owners/add', component: OwnerAddComponent},
  {path: 'owners/:id', component: OwnerDetailComponent},
  {path: 'owners/:id/edit', component: OwnerEditComponent},
  {path: 'owners/:id/pets/add', component: PetAddComponent}
];

@NgModule({
  imports: [RouterModule.forChild(ownerRoutes)],
  exports: [RouterModule]
})

export class OwnersRoutingModule {
}

CodePudding user response：

Import your module before AppRoutingModule in app.module.ts

    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        OwnersModule,
        PetsModule,
        VisitsModule,
        PetTypesModule,
        VetsModule,
        SpecialtiesModule,
        PartsModule,
        SearchModule,
        BrowserAnimationsModule,
        AppRoutingModule,
  ],