-
Notifications
You must be signed in to change notification settings - Fork 12k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature] Reduce dependencies on nodejs for the CommonEngine #25718
Comments
So after some more work I actually got it running (and it's actually running surprisingly fast, only CSS inlining is WIP) and the following is what I needed to patch:
And probably more issues I haven't found yet. Also To be clear I'm not advocating for everyone enduser needing to bring this on their own or bloating the package for everyone with huge replacements, but what might make sense is to take those dependencies out of the export interface EngineAdapter {
readPublicFile(relativePath: string): Promise<string>;
// ...
export declare class CommonEngine {
constructor(bootstrap?: Type<{}> | (() => Promise<ApplicationRef>) | undefined, adapter: EngineAdapter, providers?: StaticProvider[]);
} and then having some package like I'll try and get my adapter into a not-that-messy state in the coming days and get it open source, that it might be more obvious where the problems and risks lie, with the current non-decoupled approach. |
This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list. You can find more details about the feature request process in our documentation. |
Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends. Find more details about Angular's feature request process in our documentation. |
This feature request is CRUCIAL to keep Angular alive, I dont think it needs a community voting. Frameworks like Next or Nuxt are overtaking React and Vue and that is also because more hosters (e.g. Vercel, Cloudflare Pages, Netlify) easily allow SSR on their serverless functions. Angular Universal however still cant be used on serverless functions like Cloudflare Workers. From my personal perspective this missing feature is the death of Angular, interesting article about this: https://dev.to/jdgamble555/angular-universal-is-the-problem-not-angular-5801 |
I do agree that we need to reduce dependencies on Node.js APIs, although most of these come from critters. That being said, you can do server side rendering with cloudflare workers https://developers.cloudflare.com/pages/framework-guides/deploy-an-angular-site/ |
That doc is for a normal Angular site, not a Angular Universal SSR app |
|
They seem to shim the NodeJS API, maybe a good workaround for now: https://github.com/cloudflare/workers-sdk/blob/36d497829972667852bbcaacebcb22124d73d765/packages/create-cloudflare/src/frameworks/angular/templates/tools/bundle.mjs#L19 |
Sorry but where do you see SSR and / or Angular Universal? ![]() Angular Universal is using Btw the initial issue is from 2020: angular/universal#1740 |
I think you might have to add SSR yourself, because I see references to it in the source code of the CLI, but the documentation is really confusing... Would be much better if it was as easy as just adding a cloudflare engine or so, but because of the dependencies they probably would need some elaborate schematics for that. |
Maybe they tried to make it work without success but in the docs there is no word to Angular Universal or SSR and the command that @alan-agius4 stated creates just a regular Angular app like |
@MickL, in the above screenshot, I am not even seeing any chances done by CloudFlare such as the creation of the Here's what I am seeing, after running the above mentioned command.
|
Another thing that is not working is Vercel Edge Functions:
|
This is definitely a huge problem. If Angular Universal (not Angular) does not support Edge Function deployment, which is a Deno deployment, it will never truly be able to compete and adopted by people coming from other frameworks. J |
Any news on how to deploy an Angular +16 SSR app into Vercel/Denodeploy/Cloudfare? |
I recently deployed angular ssr 16 on EC2 with Github Actions and previously deployed on vercel using this guide. It was working fine on vercel but the Initial sever response time was around 2 -3 second. So I migrated from there after 1 day |
Angular Universal runs on Vercel but not on Serverless Edge Workers like Vercel Edge Functions, Deno Deploy or Cloudflare Workers. |
@piyushpranjal03 - Hi Pi, I wrote that guide :) The reason it takes 2-3 seconds, is because Vercel itself is Serverless using AWS Lambdas under the hood. It only takes 2-3 second on the first load of the bucket, which is the cold start time. AWS Lambdas are way faster than Cloud Functions (although paying more for faster servers could change that). Vercel Edge, on the other hand, does not use serverless functions, but the Edge Network, which would load extremely fast. However, Angular Universal will not load on the edge due to the Express dependencies (the point of this post). Fix this problem, and Angular Universal can run on the Edge (no cold starts or serverless), and it would be extremely fast on a CDN... just like you can do with literally every other SSR framework. (technically the edge is considered serverless without cold starts, but completely different infrastructure) J |
Thanks for the guide @jdgamble555 . |
npm create cloudflare@latest my-angular-app does work now (it didn't work for me the last time I tried some weeks ago). main.server.ts looks like this:
and the tools folder contains the Cloudflare shims/magic to make it work. Watching the Angular 17 announcement video I was excited to see just how committed the Angular team are to SSR (and SSG), including non-node environments on the edge. Especially with Angular Universal being rolled into core and a better DX. |
Yeah well, that's the big honey, that that isn't needed anymore, as it doesn't sound too stable of a foundation... |
They NEED to be. Angular is already left behind and I dont see them catching up to Next and Nuxt anymore. After 7 years of being an Angular developer I just tried out Vue and Nuxt for the first time and I am simply amazed by how easy it is (no classes, no DI, auto imports, runs everywhere, file based routing, build a server rest API directly in Nuxt, etc. etc.) and also by the eco system around it. Nuxt built their own server h5 to reduce serverless cold start time and a server engine Nitro to be able to deploy it everywhere (article here) while Angular is still using Express that doesnt even work on edge workers. |
@jdgamble555, we actually did reach out to Vercel, to work with them to support SSR. Unfortunately in the near term they do not have a priority to add support for Angular SSR/SSG. I think you might have sent an incorrect vite link above, as it links to CSS processing. |
Would be good if it's modular enough though to support other stuff as well. I'd want to use it from GraalVM, which works differently again. Or maybe you'd want to use it as a portable WASM/WASI module or something like that. It needs to be flexible. Not saying that support for those targets needs to be in this repo, but it should be flexible enough that you can add support for those targets on your own with a few lines of code+implementations for FS access and HTTP(S). |
@alan-agius4 - The CSS preprocessing will inline the CSS in the page. It is actually automatic, but yes uses
Yeah, I think As far as Vercel: When writing my article on deploying to Vercel, and actually wanting to deploy to Vercel for my blog back then, I actually reached out to them. They told me they don't support any 3rd party integrations, as it is up to the Framework creator and the community to create adapters that work with Vercel deployments. However, they had a specific problem with Node.js server, quoting them from December 28, 2021:
I proved them wrong by making it work, as I honestly think there was an ignorance on Vercel's behalf. They literally told me that since I did not have an adapter like nuxt vercel-build, they would not add it to the list. I did not want to take the time to build one, and frankly just switched away from Angular at that time due to the long build times for Angular Universal. I think you guys could build one now easily, but it would not work for Edge functions until the Node.js dependencies are removed, which would solve all problems at hand. J |
I am receiving below error when trying my app on cloudflare:
|
@alan-agius4 - Are you guys going to be able to work on Vercel? As I mentioned above, you would need to build a Vercel adapter like the nuxt-adapter. Again, getting rid of these dependencies all together and opening up the code to run on any JS environment would be ideal and would probably make Vercel more excited to support Angular SSR. J |
Just wanted to update that this error was related to my application. While adding Using below fixed the issue:
So, I can confirm Angular 17 works fine with Cloudflare!. |
@alan-agius4 - Is this still on the radar so we can at least deploy to Vercel Edge? J |
Is there anywhere listed what edge functions providers are supported with ssr? Right now it is Cloudflare and Netlify? |
Cloudflare works, but only without critical css inlining |
@alan-agius4 - Are you guys still working on this for Vercel / other node-less environments? |
@alan-agius4 Can you expand on this? There's zero documentation anywhere of how to make Pages work with SSR. It isn't clear within Pages how to make this work. |
@jer-tx, please check out cloudflare docs. https://developers.cloudflare.com/pages/framework-guides/deploy-an-angular-site/ NB: you will need to run |
Been trying to deploy an Angular SSR app for several days now but encountering several issues, even with the Cloudflare version of Angular SSR. The lack of documentation is also not helping. After addressing the node dependencies, I would also suggest the Angular team to try replacing the Express server with a more cross-platform/cross-runtime framework, if possible. This way Angular SSR could be deployed on Cloudflare, Fastly, Deno, Bun, AWS, Node.js, etc |
That's not even necessary, in the common engine there's basically just a function to which you provide one URL and it'll return a rendered string. No need to "integrate" any other web server, it's all just configuration. And if you wanna simplify that, no one stops you from publishing an NPM package building on you favorite web server and the common engine, it's super easy. |
@cromefire - This is unhelpful here. This needs to be part of the Angular/SSR package itself. As @nunoarruda said, there are many servers that don't support Angular out-of-the-box without changing to Vite etc (which no guide to do so btw). None of this is easy to do. Angular is the only mainstream Framework that doesn't work for basic deployment (NextJS, Remix, Nuxt, Astro, Solidstart, QwikCity, SvelteKit, Preact, Gatsby, etc) options. It's not just Edge Deployment that is the problem but all other options due to this issue request. This should be built into the main code. J |
So what you are telling me is that something like app.map("**", async ctx => {
return await commonEngine.render(ctx.path);
}); is too hard? Please... I hope you see how silly that is... If you're not able to make one function call in your framework of choice, you probably shouldn't use that framework. The problem here (and that's what the issue is about) is that that render call depends on node.js. Once that's fixed there's no reason for Angular to support absolutely everything (at least on the SSR side), even the express integration is barely worth a package (upon looking at the new code I see that the Angular team thought so as well and it seems like they have removed the integration in favor of just documenting how to use it from express)... |
Yes, I have no idea what any of that does. I can easily guess, but I shouldn't have to configure all that. It certainly isn't in the docs. You're missing the point of this thread. Not to mention that doesn't cover the CSS problems etc. J |
Then you should read the docs for the common engine & SSR or just find someone who has already built an integration or build and integration once yourself and publish it for everyone to use... If there's any problem at all it's documentation, which is completely out of scope for this issue.
You're missing the point of the issue. It has a very narrow, specified goal and that doesn't include any frameworks, but the CommonEngine specifically and is not supposed to devolve into a fight over how and which Integrations for SSR should be done. If you want to have that discussion, open a discussion or another issue.
Well if 3 loc (which like describing 3 loc as "all that" is really quite the stretch, try to configure an ASP.NET project with a DB or so, that could be described as "configure all that") is too much for you, I guess find another framework... Low code has very little code I heard... |
To deploy your Angular application with Server-Side Rendering (SSR) on Cloudflare Pages, follow these steps:
This will install all necessary dependencies.
Alternatively, if you opt for To locally test your project, execute the command Familiarize yourself with few things: server.ts File: Tools Folder:
Use
Custom HTTP Status Code or Headers: Update the renderApplication function as illustrated below:
Define the injection token
Inject
Set the HTTP status code:
Configure custom headers:
Thus far, the sole obstacle I've encountered pertains to cloudflare/workers-sdk#5262; notwithstanding, the overall procedure appears remarkably straightforward. My commendations to both the Angular and Cloudflare teams especially @alan-agius4 @petebacondarwin for facilitating such a seamless process. Should you require any assistance, please do not hesitate to reach out. |
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as resolved.
This comment was marked as resolved.
A colleague and I tried to identify and eliminate the dependencies to node in order to make the inline CSS executable in Cloudflare Workers. We came across the following packages: https://www.npmjs.com/package/critters The customisation for critter was relatively simple, we were able to replace the native node fs method with a callback and use Cloudflare ASSETS.fetch. With Picolor, the dependency on tty was a particular problem, which we were able to solve in the first step by using string replace in the bundle 🙈 However, the dependencies on node within PostCSS, especially for the source maps, were then embedded too deeply. Presumably a dedicated CriticalCSS implementation is needed for non-node environments. So unfortunately the experiment has failed for the time being :( |
That sounds pretty cool maybe one could already get this into Angular (Using callbacks of course instead of the specific Cloudflare stuff)? Or did you only replace it after the fact in the finished bundle? |
We have changed critter so that it uses a callback instead of calling node fs directly. We then pass the Cloudflare methods in our server ts file. This works great. But it also seems to be only a small piece of the puzzle. I think that postCSS is the very critical dependency. |
Most definitely, but a small part of the puzzle would already be one part at least and one is better than none. |
🚀 Feature request
What modules are relevant for this feature request?
Description
I'd like to use Angular server side outside of nodejs, because it's intended to be delivered via web frameworks or gateways (like Spring or ASP.NET Core), but those are often not in nodejs.
In my case I'd like to be able run Angular on something like GraalJS (GraalVM can run both JVM and JS) or maybe with some WASM-based JS engine to directly integrate with the backend applications.
The current state with something like GraalJS actually doesn't look too bad, but it's pretty hard to build drop-in replacements for all the things and debug all of that.
Describe the solution you'd like
I don't have the overview, whether this is even possible, but what I'd imagine ideally would be some sort of
RuntimeAdapter
interface that specifies all the host features required by theCommonEngine
and then aNodeJsAdapter
that is passed by default and implements everything using all the functions currently implemented using nodejs built-in modules and then one can optionally specify a custom adapter that works for their environment, whatever that may be.Describe alternatives you've considered
Patching all the nodejs built-in modules with custom implementations is kinda maybe possible, but it's quite the project and kinda fragile and messy and definitely not safe from breaking changes.
Scope
This issue is about the core engine not depending on node.js. It is not about alternative platforms this engine could be used in nor is the goal for Angular to provide any Integrations with specific platforms. It is merely the option to have the APIs so that either all developers or the Angular team itself can even entertain to build those kinds of platform support.
The text was updated successfully, but these errors were encountered: