Why is component able to be access even if not in declaration of any module?

Question

I have PageNotFoundComponent which I have not declared in any modules. Yet I have included it in a routing module to ensure that when we have no matching route this component will be in the router-outlet of app component.

app.component.html

    <app-header></app-header>
    <br>
     <div class="container">
        <router-outlet></router-outlet>
     </div>

Also

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';



import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HeaderComponent } from './header/header.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';


import { highlightDirective } from './Directives module/highlight.directive';
import { ImprovedHighlightDirective } from './Directives module/improved-highlight.directive';
import { ReverseOfIfDirDirective } from './Directives module/reverse-of-if-dir.directive';
import { DropdownDirectiveDirective } from './shared/dropdown-directive.directive';


import { ShoppinglistService } from './shopping-list/shoppinglist.service';
import { AppRoutingModule } from './app-routing.module';
import { RecipesService } from './recipes/recipes.service';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthComponent } from './auth/auth.component';
import { LoadingSpinnerComponent } from './shared/loading-spinner/loading-spinner.component';
import { AuthInterceptorService } from './auth/auth-interceptor.service';
import { AlertComponent } from './shared/alert/alert.component';
import { PlaceholderDirective } from './shared/placeholder.directive';
import { RecipesModule } from './recipes/recipes.module';
// import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
// import { RecipesRoutingModule } from './recipes/recipes-routing.module';



@NgModule({
  declarations: [ // add any new components here
    AppComponent,
    HeaderComponent,

    ShoppingListComponent,
    ShoppingEditComponent,
    highlightDirective,
    ImprovedHighlightDirective,
    ReverseOfIfDirDirective,
    DropdownDirectiveDirective,
    AuthComponent,
    LoadingSpinnerComponent,
    AlertComponent,
    PlaceholderDirective,
    

  ],
  imports: [// all imports here
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    RecipesModule,

  ],
  providers: [ShoppinglistService, RecipesService, { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptorService, multi: true }],
  // ,ServersService,AuthService,AuthGuard,CanDeactivateGuard,
  // ServerResolverService
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing module

import { Routes, RouterModule } from '@angular/router';

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

import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { AuthComponent } from './auth/auth.component';


const appRoutes: Routes = [

  { path: '', redirectTo: '/recipes', pathMatch: 'full' },
  { path: 'shoppinglist', component: ShoppingListComponent },
  { path: 'auth', component: AuthComponent },

  {
    path: 'not-found', component: PageNotFoundComponent, data: { message: '404 error ! Explore our site to know more' }
  },
  { path: '**', redirectTo: '/not-found' }
]

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})

export class AppRoutingModule {

}

Now when i go to some unavailable route I automatically go to page-not-found component and is loaded successfully.

image of output

Note: Using Angular 9 version ....Maybe someone could know if any such feature is added..