withAppShell not working

[tirth-patel-0309]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

I can not able to setup the simple app-shell demo with angular version 20 for server side rendering. If possible then give me the suggestion hoe to simple working app-shell demo.

Thnak you.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Anything else?

No response

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[tirth-patel-0309]

I create the ng new repro-app with this steps

then i create the app-shell by following this https://angular.dev/ecosystem/service-workers/app-shell

and i also create the home component

and in this docs https://angular.dev/ecosystem/service-workers/app-shell at last i read this To verify the build output, open dist/my-app/browser/index.html. Look for default text app-shell works! to show that the application shell route was rendered as part of the output.

but when i run this command npm run build then i can see only this index.csr.html in dist/browser i want to make the app-shell working in ssr mode

here is a repo lin https://github.com/raviinfra/repro-app

and if i select the no for

and this docs https://angular.dev/ecosystem/service-workers/app-shell

and run this command npm run build

then i can see the changes in this files

mean this files src/app/app.config.ts and src/app/app.routes.server.ts update extra not mention in this docs https://angular.dev/ecosystem/service-workers/app-shell but this time i can see

but there is no server folder

[tirth-patel-0309]

If it possible then please provide the simple repo link in which app shell works perfectly. So, i can easily understand.

Thanks.

[tirth-patel-0309]

repo link https://github.com/raviinfra/repro-app

which i want to make as per this https://angular.dev/ecosystem/service-workers/app-shell#:~:text=The%20App%20shell,the%20code%20loads.

[alan-agius4]

The App shell is designed for Client Side Rendering (CSR), not Server-Side Rendering (SSR). It remains useful in a hybrid mode for any routes that are CSR only. With an SSR build, the index.html content is inlined into the server bundle.

To see the App shell, you must run the server and navigate to a CSR route.

[tirth-patel-0309]

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)
  },
];

is this correct or i need to change

[alan-agius4]

The app-shell is only rendered for CSR (Client-Side Rendered) pages. In your reproduction, there are no CSR pages present:
https://github.com/raviinfra/repro-app/blob/9232e7b52900f9a0ccd7527c99ac52731a975a98/src/app/app.routes.server.ts#L3-L11

To improve perceived application performance, consider techniques like prerendering for static pages instead of relying solely on SSR.

Please note that this issue tracker is not intended for support requests. Kindly repost your question on StackOverflow using the angular tag. If you're curious why we handle support questions this way, you can find more details here.

[tirth-patel-0309]

ok thanks.