Unable to to pre-render my demo pages about angular HOT 13 OPEN

There a number of different errors here with different causes:

1. Error: projects/showcase/server.ts:12:18 - error TS2349: This expression is not callable. is due to import * as express from 'express'; which should be replaced with import express from 'express'; when esModuleInterop is enabled.
2. An unhandled exception occurred: window is not defined - this is due to your code is not SSR compliant as you use window example window.clearInterval. These should be replaced with non platform specific implementation example: clearInterval. maplibre-gl is also not compatble with SSR and thus, any of this could should be imported and used in https://angular.io/api/core/afterNextRender and https://angular.io/api/core/afterRender
3. DOM manipulation should be performed in the designed hooks. https://angular.io/api/core/afterNextRender and https://angular.io/api/core/afterRender
4. ERROR Error: Error retrieving icon :ngx-maplibre-gl!, this is because accessing local assets is only done when using the new application builder. You can update your application to use the new esbuild based builder using ng update @angular/cli --name=use-application-builder. You also need to use the fetch API provideHttpClient(withFetch()).
5. Since your application requires zone.js, this also needs to be added in the polyfills section in your angular.json.

Note: enabling sourcemaps will give you better error stacktraces for runtime errors.

from angular.

Thanks for taking the time to look into this!
Note that I have always updated this small app using ng update, and so these should've been added to the upgrade code.
Also everything you wrote here is not documented anywhere, so I think it would make sense to enrich the docs with some helpful tips.

1. This is generated code that was added using ng add @angular/ssr I believe it should be fixed there.
2. Yes, I know maplibre is not SSR compatible, I'm sure I'm not the only one with this problem, the question is what to do in this case, adding a section about it to the docs will be helpful
3. No clue what to do with this tip... What should I be looking for in my app?
4. Am I using an old version of the builder? I'm using angular 17, shouldn't it be the defualt?
5. Besides some post saying some application can be ran without zone.js I have found very little information about this, I think a section about it would be helpful in the official docs...

from angular.

Transferring to the FW repo since this is mostly due to lack of documentation

from angular.

@alan-agius4 there are still issues with the generated express code worth fixing...
Also I guess better error messages can help here and suggestions how to solve the problem I'm facing (like browser specific code etc).
I'm not saying the docs shouldn't improve, but the CLI can help too.

from angular.

@alan-agius4 , we got 1, 4, 5 done, so now it's a modern application SPA.

We're still fighting these two steps you mentioned related to the transition to SSR:

2. An unhandled exception occurred: window is not defined - this is due to your code is not SSR compliant as you use window example window.clearInterval. These should be replaced with non platform specific implementation example: clearInterval. maplibre-gl is also not compatble with SSR and thus, any of this could should be imported and used in https://angular.io/api/core/afterNextRender and https://angular.io/api/core/afterRender
3. DOM manipulation should be performed in the designed hooks. https://angular.io/api/core/afterNextRender and https://angular.io/api/core/afterRender

Basically, they are the same thing, and the afterNextRender/afterRender doesn't seem like the right solution to the problem. We need to be able to define a boundary where the server-side rendering (or in this case pre-rendering) stops and the client-side rendering begins.

Here are how other frameworks specify this boundary:

• Astro has client directive
• SolidStart has clientOnly
• Nuxt has <ClientOnly>
• Next has "use client"

from angular.

Maybe the isPlatformBrowser can help define this boundary, if it's pre-render compatible

https://stackoverflow.com/questions/71475433/client-side-render-some-components-when-using-angular-universal

Article on the topic of conditional client rendering

https://medium.com/web-development-with-sumit/how-to-handle-browser-storage-in-angular-ssr-19df7590a8b3

from angular.

afterNextRender runs only client side. This is what we recommend to setup client-side only libs.

from angular.

@JeanMeche , @alan-agius4

General experience - I've been making some progress with this approach, but I must admit it feels like a lot of work, and potentially very error prone, to go through and adapt each client component instead of a boundary and saying "from here and onwards" like most frameworks do.

ngOnInit - Using afterNextRender, instead of ngOnInit, often works, and now the app is at least building.

ngOnDestroy - Is there a client-only counterpart for ngOnDestroy as well? Currently I have to disable the content of the ngOnDestroy because it's being ran on the server. I need a way to do it client-side, so that I don't add memory leaks in the client.

ngOnChange - Where I normally use ngOnChange(changes=>{}) i now try to use the client-side afterRender, but since afterRender is not triggered by a change, it running at the wrong times, and it doesn't provide a changes object I need in my onChange function . I don't know how to migrate this ngOnChange content to client-only.

prerender:true doen't prerender - Another thing, despite the prerender:true flag being on, I don't see .html files created for each route inside of dist at build time. I expected that based on this article which doesn't mention having to do anything but that https://angular.io/guide/prerendering

from angular.

Any help here would be greatly appreciated.
We were able to build the SSR part of things and it seems to be working mostly, but I can't get the prerender to work.
When I add it I get all the icon and window build errors again.
If I only set a single route to prerender using the routesFile it still fails.
Is there a way to understand why the build is failing?
I'm getting the following cryptic error messages:

ERROR Error: Error retrieving icon :ngx-maplibre-gl! 
    at Object.error (file:///Users/---/dev/temp/ngx-maplibre-gl/.angular/prerender-root/56821466-7aa6-4c21-a319-54117db33efb/chunk-IR2AAQSL.mjs:2:10604)
    at jo.error (file:///Users/---/dev/temp/ngx-maplibre-gl/.angular/prerender-root/56821466-7aa6-4c21-a319-54117db33efb/chunk-5KM5SIJU.mjs:4:3179)
    at de._error (file:///Users/---/dev/temp/ngx-maplibre-gl/.angular/prerender-root/56821466-7aa6-4c21-a319-54117db33efb/chunk-5KM5SIJU.mjs:4:2823)
    at de.error (file:///Users/---/dev/temp/ngx-maplibre-gl/.angular/prerender-root/56821466-7aa6-4c21-a319-54117db33efb/chunk-5KM5SIJU.mjs:4:2583)
    at $o._error (file:///Users/---/dev/temp/ngx-maplibre-gl/.angular/prerender-root/56821466-7aa6-4c21-a319-54117db33efb/chunk-5KM5SIJU.mjs:4:2823)
    at $o.error (file:///Users/---/dev/temp/ngx-maplibre-gl/.angular/prerender-root/56821466-7aa6-4c21-a319-54117db33efb/chunk-5KM5SIJU.mjs:4:2583)
    at $o._error (file:///Users/---/dev/temp/ngx-maplibre-gl/.angular/prerender-root/56821466-7aa6-4c21-a319-54117db33efb/chunk-5KM5SIJU.mjs:4:2823)
    at $o.error (file:///Users/---/dev/temp/ngx-maplibre-gl/.angular/prerender-root/56821466-7aa6-4c21-a319-54117db33efb/chunk-5KM5SIJU.mjs:4:2583)
    at $o._error (file:///Users/---/dev/temp/ngx-maplibre-gl/.angular/prerender-root/56821466-7aa6-4c21-a319-54117db33efb/chunk-5KM5SIJU.mjs:4:2823)
An unhandled exception occurred: window is not defined

When I set prerender: false the build passes again.

from angular.

Using provideHttpClient(withFetch()) fixes the ERROR Error: Error retrieving icon :ngx-maplibre-gl! during build time.

from angular.

We have managed to solve all the problems and make pre-render work.
This was a super painful experience due to lack of documentation, cryptic error messages and generally a poor developer experience.
I hope the docs and process can be improved as part of this issue.
If anyone is interested, the following is the relevant PR:

• maplibre/ngx-maplibre-gl#156

from angular.

How can I exclude a component from SSR in Angular 17?
I tried isPlatformBrowser, afterRender. But not working
alway got this error: self is not defined

from angular.

It is advised to create a reproduction and not screenshot an error.
This issue had been closed.
I advise to take a look at the showcase code to see how we solved all kinds of issues.

from angular.