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)
- Angular 17 SSR: Slow server response time when using wildcard route HOT 5
- ERROR LOADING PAGES AFTER USE router.navigate
- SSR fails when root AppComponent in index.html is self-closing HOT 1
- foo = signal(''): if string is empty, !!foo () returns false HOT 1
- Form input mask provided by the framework HOT 6
- [Feature] Introduce Type-safe Token Providing HOT 7
- docs: `inject()` is missing all overloads HOT 2
- Add distinction between model() and model.required() on type level HOT 1
- Standalone Component Exports HOT 1
- Set ViewEncapsulation per module HOT 2
- setting signal outside of angular zone error HOT 3
- View provider/provider info that's logged in the console is incorrect
- No more subclasses or `implements`/`extends` information in API doc
- Missing code blocks in usage notes. HOT 1
- toSignal does not change if new published value passes equality check and there is no way to modify that HOT 2
- ErrorNG8001 ${element} is not know element HOT 11
- FormGroup.reset() input typings are incorrect HOT 1
- ErrorHandler docs don't have standalone alternative HOT 2
- Allow one time binding input HOT 1
- Missing example code for accessibility best practices case study HOT 1
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.