Multi Module Angular Project After add New Sub Module Not Naviagating.No Errors Display

I have a Multi Module angular project that i have been working and today i had to add new sub module (AdvertisingModule).I have configured all routing and code without any error.but when i click button inside the new module it has to navigate to it's child page.No errors in console URL also changing but UI does not change.Here i have listed my App module and new module.how can i find the error ..?

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

import { PagesComponent } from './pages/pages.component';
import { NotFoundComponent } from './pages/not-found/not-found.component';
import { AdminGuardService } from './Auth/admin-guard.service';


export const routes: Routes = [
    { 
        path: '', 
        component: PagesComponent, children: [
            { path: 'home', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) },
            { path: 'account', loadChildren: () => import('./pages/account/account.module').then(m => m.AccountModule), data: { breadcrumb: 'Account Settings' } },
            { path: 'compare', loadChildren: () => import('./pages/compare/compare.module').then(m => m.CompareModule), data: { breadcrumb: 'Compare' } },
            { path: 'wishlist', loadChildren: () => import('./pages/wishlist/wishlist.module').then(m => m.WishlistModule), data: { breadcrumb: 'Wishlist' } },
            { path: 'cart', loadChildren: () => import('./pages/cart/cart.module').then(m => m.CartModule), data: { breadcrumb: 'Shopping Cart' } },
            { path: 'checkout', loadChildren: () => import('./pages/checkout/checkout.module').then(m => m.CheckoutModule), data: { breadcrumb: 'Checkout' }},
            { path: 'contact', loadChildren: () => import('./pages/contact/contact.module').then(m => m.ContactModule), data: { breadcrumb: 'Contact' }},
            { path: 'brands', loadChildren: () => import('./pages/brands/brands.module').then(m => m.BrandsModule), data: { breadcrumb: 'Brands' } },
            { path: 'products', loadChildren: () => import('./pages/products/products.module').then(m => m.ProductsModule), data: { breadcrumb: 'All Products' }}
            
        ]
    },
    { path: 'retail', loadChildren: () => import('./retail/retail.module').then(m => m.RetailModule), data: { breadcrumb: 'Foggy Frog Retail' }},
    { path: 'landing', loadChildren: () => import('./landing/landing.module').then(m => m.LandingModule),canActivate : [AdminGuardService] },
    { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) , canActivate : [AdminGuardService]},
    { path: 'sign-in', loadChildren: () => import('./pages/sign-in/sign-in.module').then(m => m.SignInModule), data: { breadcrumb: 'Sign In ' }},
    { path: 'advertiesments', loadChildren: () => import('./advertising/advertising.module').then(m => m.AdvertisingModule), data: { breadcrumb: 'Foggy Frog Advertising' }},
    { path: '**', component: NotFoundComponent }
];



@NgModule({
    imports: [
        RouterModule.forRoot(routes, {
            preloadingStrategy: PreloadAllModules, // <- comment this line for activate lazy load
            relativeLinkResolution: 'legacy',
            initialNavigation: 'enabled'  // for one load page, without reload
            // useHash: true
        })
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

This is my newly added module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SelectListComponent } from './select-list/select-list.component';
import { PictureViewerComponent } from './picture-viewer/picture-viewer.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MatCardModule } from '@angular/material/card';
import { RouterModule } from '@angular/router';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { InputFileConfig, InputFileModule } from 'ngx-input-file';
import { SharedModule } from '../shared/shared.module';
import { selectlistResolver } from './select-list/selectlistResolver';
import { pictureViewerResolver } from './picture-viewer/pictureViewerResolver';
import { advertisingComponent } from './advertising.component';
const config: InputFileConfig = {
  fileAccept: '*'
};

export const routes = [
  {
    path : 'internal',
    component : advertisingComponent,
    children : [
      { path : 'list' , component : SelectListComponent , resolve : { cres : selectlistResolver }},
      { path : 'preview/:listID' , component : PictureViewerComponent ,data: { breadcrumb: 'Manage User Account' },resolve : {cres : pictureViewerResolver}} 
    ]
  }
 
]


@NgModule({
  declarations: [PictureViewerComponent,SelectListComponent,advertisingComponent],
  imports: [
    ReactiveFormsModule,
    FormsModule,
    MatCardModule,
    RouterModule.forChild(routes),
    SharedModule,
    InfiniteScrollModule,
    CommonModule
  ]
  ,
  providers : [selectlistResolver,pictureViewerResolver]
})
export class AdvertisingModule { }

See below picture it's loading without any issue for internal URL also

but when i press action button it change the URL as below picture and stay in same screen

this is the code for action button

async OpenList() {

    this.router.navigate(['/advertiesments/internal/preview/38c7f9ec-fd0b-4338-9959-e254c32678b9']);

   
  }

how can i find the error since this not display any error.

Update advertising Component Code

import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';

import { map } from 'rxjs';
import { TokenWithEmail } from 'src/app/Global/Models';
import { ApiserviceService } from 'src/app/Global/apiservice.service';
import { advertisingInfo } from 'src/app/app.models';

@Component({
  selector: 'app-select-list',
  templateUrl: './advertising.component.html',
  styleUrls: ['./advertising.component.scss']
})
export class advertisingComponent implements OnInit {


  constructor(private apiservice : ApiserviceService, private router : Router) { }

  ngOnInit(): void {

    console.log("Image list Open");
     // this.router.navigate(['/advertiesments/internal/list']);
   
  }



  async OpenList() {

   
    this.router.navigate(['/preview/38c7f9ec-fd0b-4338-9959-e254c32678b9']);

   
  }




}

HTML Code

<h4 class="py-2"> Available Advertisement Lists </h4>
<button mat-raised-button (click)="OpenList()">Action</button>

scss

.body{
    background-color: black;
}

Picture Viewer Component Code

<div class="picture-viewer" >
    <img [src]="pictures[currentIndex]?.imagepath" alt="Picture" class="picture" />
    <div class="controls">
      <button mat-icon-button (click)="toggleFullScreen()">
        <!-- <mat-icon>{{ isFullScreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon> -->
      </button>
      <button mat-icon-button (click)="refreshPictures()">
        <!-- <mat-icon>refresh</mat-icon> -->
      </button>
    </div>
  </div>

TS File Code

import { Component, OnInit } from '@angular/core';

import { IImage } from 'src/app/app.models';
import { ApiserviceService } from 'src/app/Global/apiservice.service';


@Component({
  selector: 'app-picture-viewer',
  templateUrl: './picture-viewer.component.html',
  styleUrls: ['./picture-viewer.component.scss']
})
export class PictureViewerComponent implements OnInit {
  pictures: IImage[] = [];
  currentIndex = 0;
  intervalId: any;
  isFullScreen = false;

  constructor(private apiservice : ApiserviceService) { }

  ngOnInit(): void {

    console.log("CCCCCCCCCC *** I came Here");
    
    this.loadPictures();
    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape' && this.isFullScreen) {
        this.exitFullScreen();
      }
    });
  }

  loadPictures(): void {

    this.apiservice.GetAdvertisingSingleList('38c7f9ec-fd0b-4338-9959-e254c32678b9').subscribe(x=>{
      this.pictures = x.imagelist;
      console.log(this.pictures);
      this.startSlideshow();
    });

    // this.pictureService.fetchPictures().subscribe(pictures => {
    //   this.pictures = pictures;
    //   this.startSlideshow();
    // }, error => {
    //   this.pictures = this.pictureService.getCachedPictures();
    //   this.startSlideshow();
    // });
  }

  startSlideshow(): void {
    this.intervalId = setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.pictures.length;
    }, 3000); // Change picture every 3 seconds
  }

  stopSlideshow(): void {
    clearInterval(this.intervalId);
  }

  refreshPictures(): void {
    this.stopSlideshow();
    this.loadPictures();
  }

  toggleFullScreen(): void {
    this.isFullScreen = !this.isFullScreen;
    if (this.isFullScreen) {
      document.documentElement.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  }

  exitFullScreen(): void {
    if (this.isFullScreen) {
      document.exitFullscreen();
      this.isFullScreen = false;
    }
  }
}

Solution

Router outlet is missing, without this, angular will not render the child routes, that is the problem!

<h4 class="py-2"> Available Advertisement Lists </h4>
<button mat-raised-button (click)="OpenList()">Action</button>
<router-outlet/> <!-- changed here! -->