App Shell Not Displaying in CSR Mode for angular 20

For CSR Mode

After follow the [https://angular.dev/ecosystem/service-workers/app-shell] then i can see the changes in files and extra in src/app/app.config.ts and src/app/app.routes.server.ts and after how to use in routes like when i start the application and app shell can be trigger till api data can be show.

If possible then suggest me the steps or repo.

If my application take a more time to load and till that time i see the local host project in chrome is loading in that case app-shell shoud be display or not?

If not then what use case for to make the better user experience.

here is a my routes file for to load the app shell first when application take a time to load

` import { Routes } from '@angular/router';

export const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', loadComponent: () => import('./home/home')
.then(m => m.Home)
},
];`


and src/app/app.routes.server.ts

` import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
{
path: 'home',
renderMode: RenderMode.Server
},
{
path: '**',
renderMode: RenderMode.Prerender
}
];`


suggest me the write working solution

I try to work the app-shell for to better ux but not working.

Continue reading...