I am having a couple of issues with my ChildRoutes. The normal routings in my AppComponent work but my ChildRoutes unfortunately do not. My plan is to be able to access different components via a navigation bar. Each of these components has a sidebar with which I want to access other components. I am using Angular 12

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppRoutingModule} from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';


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

app-routing.module.ts

import { Component, NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { BondsComponent } from './components/bonds/bonds.component';
import { CarComponent } from './components/car/car.component';
import { CharityComponent } from './components/charity/charity.component';
import { DebtsComponent } from './components/debts/debts.component';
import { FinanceComponent } from './components/finance/finance.component';
import { finance_routes } from './components/finance/finance.routes';
import { HomeComponent } from './components/home/home.component';
import { IncomestatementComponent } from './components/incomestatement/incomestatement.component';
import { OverviewComponent } from './components/overview/overview.component';
import { ServiceComponent } from './components/service/service.component';
import { SettingsComponent } from './components/settings/settings.component';
import { SportsComponent } from './components/sports/sports.component';
import { HouseComponent } from './house/house.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'finance', component: FinanceComponent, children: finance_routes},
  { path: 'sports', component: SportsComponent },
  { path: 'charity', component: CharityComponent },
  { path: 'car', component: CarComponent },
  { path: 'settings', component: SettingsComponent },
  { path: 'service', component: ServiceComponent },
];


@NgModule({
  imports: [
            RouterModule.forRoot(routes)
          ]

            ,
  exports: [RouterModule]
})
export class AppRoutingModule { }

export const ArrayOfComponents = [
  HomeComponent,
  FinanceComponent,
  DebtsComponent,
  IncomestatementComponent,
  HouseComponent,
  BondsComponent,
  SportsComponent,
  CharityComponent,
  CarComponent,
  SettingsComponent,
  ServiceComponent,
  OverviewComponent
]

finance.routes.ts

import { Routes } from '@angular/router';
import { HouseComponent } from 'src/app/house/house.component';
import { BondsComponent } from '../bonds/bonds.component';
import { DebtsComponent } from '../debts/debts.component';
import { IncomestatementComponent } from '../incomestatement/incomestatement.component';
import { OverviewComponent } from '../overview/overview.component';

export const finance_routes: Routes = [
  
  { path: 'overview', component: OverviewComponent },
  { path: 'debts', component: DebtsComponent },
  { path: 'incomestatement', component: IncomestatementComponent },
  { path: 'house', component: HouseComponent },
  { path: 'bonds', component: BondsComponent }
        
];

finance.module.ts

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

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule
  ]
})
export class FinanceModule { }

<div class="row mt-5">
    <div class="col-2">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="flex-sm-fill text-sm-center nav-link" routerLink="/overview">Overview</a>
            </li>
            <li class="nav-item">
                <a class="flex-sm-fill text-sm-center nav-link" routerLink="/house">House</a>
            </li>
            <li class="nav-item">
                <a class="flex-sm-fill text-sm-center nav-link" routerLink="/house">Bonds</a>
            </li>
            <li class="nav-item">
                <a class="flex-sm-fill text-sm-center nav-link" routerLink="/incomestatement">Income-Statement</a>
            </li>
            <li class="nav-item">
                <a class="flex-sm-fill text-sm-center nav-link" routerLink="/debts">Debts</a>
              </li>
        </ul>
        
    </div>
    <div class="col-10">
    <p>FINANCE</p>
    <router-outlet></router-outlet>
    </div>
  </div>
  

Currently I encounter the following error:

Error: src/app/components/finance/finance.component.html:24:5 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Can anyone tell me what I am doing wrong?

CodePudding user response：

Your components have not been declared in AppModule. Since they are finance components, declare the FinanceComponent, alongside all the finance-related components in the FinanceModule (declarations array), then add the FinanceModule in the AppModule's import array