Prerendered home page overwrites app-shell, causing flash of home page on non-prerendered routes

[aeslinger0]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

This is a follow-up to #28344

I have an Angular 18 site in which I implemented app-shell. In my angular.json I have "prerender": true and "ssr": false and when I run ng build, I can see the shell contents in the main index.html as expected.

However, if I add a route for the homepage such as { path: '', loadComponent: () => import('src/app/dashboard/dashboard.component').then(x => x.DashboardComponent) }, then I see the prerendered content of dashboard instead of shell in the index.html. I believe this is why the dashboard content flashes for a moment when navigating to deep links for non-prerendered routes.

The workaround is to have your homepage route be something like /home instead of / and then include { path: '', pathMatch: 'full', redirectTo: 'home' } in your routes, however, this redirect costs me ~300ms according to Chrome Lighthouse and I would like the canonical url of my root page to actually be my root page.

How can I prerender the site including the homepage which has a route of /, but still have the shell display while loading deep links to non-prerendered routes?

Minimal Reproduction

• Create a new app by following the app-shell pattern.
• Modify angular.json to have "prerender": true and "ssr": false.
• Add one route without parameters (which will prerender) and one route with parameters (which will not prerender)
• Run ng build.
• Notice app-shell is in the index.html.
• Run http-server on the dist folder.
• Notice that reloading on the prerendered route flashes the prerendered content of that route as expected.
• Notice that reloading on the non-prerendered route flashes the app-shell as expected.
• Add a component for the home page such as ng g c dashboard.
• Add a route for the home page using { path: '', loadComponent: () => import('src/app/dashboard/dashboard.component').then(x => x.DashboardComponent) }.
• Run ng build again.
• Notice app-shell has been replaced by dashboard content.
• Run http-server on the dist folder.
• Notice that reloading on the non-prerendered route now flashes the dashboard content instead of the app-shell.

Exception or Error

No response

Your Environment

Angular CLI: 18.2.3
Node: 22.3.0
Package Manager: yarn 1.22.17
OS: win32 x64

Angular: 18.0.4
... animations, cdk, cdk-experimental, common, compiler, core
... elements, forms, material, platform-browser
... platform-browser-dynamic, platform-server, router

Package Version

@angular-devkit/architect 0.1802.1
@angular-devkit/build-angular 18.2.1
@angular-devkit/core 18.2.3
@angular-devkit/schematics 18.2.3
@angular/cli 18.2.3
@angular/compiler-cli 18.2.3
@angular/ssr 18.2.0
@schematics/angular 18.2.3
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.10

Anything else relevant?

No response

[alan-agius4]

This is functioning as expected. Since the root page is pre-rendered, the app shell is generated in the index.csr.html file. You'll need to configure your web server to serve this file as the default.

Alternatively, you might also consider pre-rendering the routes with parameters and/or enabling SSR.

[aeslinger0]

@alan-agius4 there is no index.csr.html in my dist folder when prerender: true and ssr: false. Also, where is this documented?

[aeslinger0]

@alan-agius4 can you please reopen this? The index.csr.html only generates if ssr: true. Based on what you said, it seems that it should also generate if prerender: true and ssr: false.

[aeslinger0]

@alan-agius4 thanks for reopening. I temporarily set ssr: true to get index.csr.html to generate and using works great, but maybe you could clarify something for me. In #28344 I was told to implement app-shell and in this issue I was told to use index.csr.html. With my routes set as described above, the contents of app-shell is nowhere to be found. Shouldn't the app-shell contents be added to index.csr.html? Otherwise, what is the purpose of app-shell?

[alan-agius4]

@aeslinger, you're right that the contents of app-shell should be included in index.csr.html. I remember there was a bug that prevented index.csr.html from updating properly. I believe the fix for this issue was applied only in the main branch, which is currently set up for the v19 pre-release.

Unforutnly, the fix will be tricky to backport as there have been significant changes and improve in SSG and SSR on the main branch.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}