Comments (9)
@Dok11 the ɵannotateForHydration
was not designed as a public API and as you mentioned, there is a need to include transfer state info into the page. The ɵannotateForHydration
function is invoked as a part of the renderApplication function, which is exposed as a public API. Could you please let us know if using renderApplication
would work for your use-case?
from angular.
Ok, I installed @angular/platform-server
package which provided the renderApplication
function. And I changed my code to this:
const promiseApp = new Promise<ApplicationRef>((resolve) => {
resolve(this.applicationRef);
});
renderApplication(() => promiseApp, {
document: this.document,
}).then(() => {
const script = this.renderer2.createElement('ng-pre-script');
script.id = 'ng-state';
script.setAttribute('type', 'application/json');
script.style = 'display: none;';
script.textContent = this.transferState.toJson();
this.renderer2.appendChild(this.document.body, script);
});
but it provides an error:
ERROR Error: NG0400: A platform with a different configuration has been created. Please destroy it first.
at assertPlatform (core.mjs:32413:15)
at core.mjs:32384:16
at createServerPlatform (platform-server.mjs:16587:12)
at platform-server.mjs:16724:25
at Generator.next (<anonymous>)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:22:1)
at asyncToGenerator.js:27:1
at new ZoneAwarePromise (zone.js:1425:21)
at asyncToGenerator.js:19:1
I think there is a conflict between regular app initialization in the main.ts
:
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));
and with manually call renderApplication()
, which calls later when all components of page are loaded and rendered.
Even if we somehow fix this error in runtime, there is another trouble. The main.js of bundle with my initial approach are take 340 KB, but after installation platform-server
and inculding renderApplication
, the main.js
of bundle takes 579 KB. So I think it will be much better with just providing annotateForHydration in the public API =)
from angular.
It appears that you're utilizing the platform-server package within the client-side version of the application, which is not officially supported.
Given that prerender.io
operates by generating a static site generation page from the client-side version of the application, functionalities such as hydration, HTTP transfer cache, etc., do not function as expected. While you could currently utilize ɵannotateForHydration
to address workaround some of these issue, it's unlikely to remain as effective in the future, especially as hydration evolves to support event replay and partial hydration.
If you aim to fully leverage the capabilities of Angular, the recommended approach is to utilize the Angular CLI to generate prerendered pages.
from angular.
functionalities such as hydration, HTTP transfer cache, etc., do not function as expected.
What exactly?
As I can see, TransferState, http get requests, layout, all of them are works fine with hydratation, when HTML are received from prerender.io, which takes these parts from ɵannotateForHydration
and transferState.toJson()
from angular.
The HTTP transfer cache, which enhances performance during hydration by re-using HTTP requests performed on the server. In this case this feature will not work when using this method because HTTP requests are solely cached when Angular operates within a server context. Consequently, requests are stored on the server and reused exclusively when the application is running in the browser.
For more information, please refer to: Caching Data When Using HttpClient
From my understanding Prerender.io works pretty similar to puppeteer where the application is rendered in a browser. In my view, for hydration to be effective, the @angular/platform-server
package needs to be used.
from angular.
because HTTP requests are solely cached when Angular operates within a server context
In my case, the <script id="ng-state"
contains all get-requests which was called before I save state. Here I see URLs and responses body. After loading an app these reqests are not completes again, looks like an angular knows that they are included already.
In summary, in my case all works fine except that the annotateForHydration
hidden in the private API.
from angular.
In my case, the <script id="ng-state" contains all get-requests which was called before I save state. Here I see URLs and responses body. After loading an app these reqests are not completes again, looks like an angular knows that they are included already.
@Dok11 I believe this behavior would change as a result of 11705f5 - HTTP requests will no longer be added to the TransferCache
on the client (they will only be added to the cache on the server).
In summary, in my case all works fine except that the annotateForHydration hidden in the private API.
The annotateForHydration
was not designed as a standalone function, it's a part of the server logic to produce an HTML that Angular can hydrate later on the client. As a result, we would not be able to expose this function in the public API as is.
From my understanding Prerender.io work pretty similar to puppeteer where the application is rendered in a browser.
If Prerender.io works as Alan mentioned above, the best option would be to enable SSR or SSG for your application. In this case, Angular would produce an HTML, which can be used by Prerender.io and this HTML would be hydratable on the client.
Another option might be to avoid using hydration completely and use client-only rendering (i.e. do not use provideClientHydration()
call). In this case, all content inside of an app root element would be removed on the client and Angular would re-create an application from scratch. It may result in some flickering, but the application would be functional after the bootstrap.
from angular.
So you have plans by changing API to work hydration only with universal and no other ways?
from angular.
@Dok11, hydration requires usage of @angular/platform-server
, ie: your application needs to be rendered on the server using the Angular rendering methods, the fact that it currently works on your client side rendered application is a lucky, not supported way of performing hydration.
from angular.
Related Issues (20)
- API for ngModule bootstrap for SSR? - `platformServer.bootstrapModule` vs `bootstrapApplication` of `@angular/platform-server`? HOT 2
- Renderer2 method that allows you to set signal inputs HOT 5
- Angular attributes produce HTML validation errors HOT 3
- Angular 15 - router.events are empty with nested router outlets on page refresh HOT 1
- The CSP nonce remains in the DOM after being read by Angular HOT 1
- API Reference search on angular.dev HOT 3
- Improve the angular.dev dark mode HOT 1
- Use hadError instead of errors
- docs: @defer requires the parent component also be standalone
- BrowserViewportScroller not honoring native scroll margin HOT 4
- Unit Testing guide has incorrect code HOT 1
- Angular compiler seemingly false negative warning : optional chaining refused on array item HOT 3
- ActivatedRoute in Directive: Snapshot.params are not getting updated HOT 2
- APP_INITIALIZER with HttpClient provoke memory leak in SSR projects HOT 8
- New Angular Docs website is not PWA compatible
- @for can't be used for forms where $index based calls on removeAt() are necessary HOT 1
- Recording already in progress issue in Profiler
- SSR won't render [style.background-image] with base64 URL values
- Btter Docs About Error handling in httpClient HOT 2
- No compile time error/warning in HTML template when Signals variable used without parenthesis HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular.