[Feature] Reduce dependencies on nodejs for the CommonEngine

[cromefire]

🚀 Feature request

What modules are relevant for this feature request?

• builders
• common
• express-engine

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 the CommonEngine and then a NodeJsAdapter 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.

[cromefire]

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:

• url (only seems to be using the whatwg URL, which can be loaded from node's url, is just available in a Browser or is available as standalone npm package whatwg-url)
• path (can be substituted with pathe)
• fs (doesn't actually seem to be used or required at least when you pass in the index.html as string, but you need to patch it for require to not fail)
• os (unused but needs to be patched)
• tty (isatty is used, can be safely patched to just always return false)
• the global process (env and argv are used but can just be empty, hrtime.bigint and cwd need to be patched)
• the global global (used somewhere instead of globalThis)

And probably more issues I haven't found yet.

Also queueMicrotask, setTimeout, clearTimeout, setInterval and clearInterval need to be patched, but as they are so universal, I think it's fair to make the Engine responsible for bringing those.

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 CommonEngine and change it's signature to something like:

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 @angularuniversal/nodejs-adapter that provides @angularuniversal/express-engine with an easy to use implementation of that Adapter so there are no breaking changes for the normal user. For a bit less modularity, without breaking the CommonEngine API one could also maybe include that NodeJsEngine in the common package, but that makes it harder probably. The biggest problems are going to be the dependencies on node for dependencies though, so the feasibility should probably be checked before trying.

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.

[angular-robot]

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.

[angular-robot]

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.

[MickL]

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

[alan-agius4]

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/

[MickL]

That doc is for a normal Angular site, not a Angular Universal SSR app

[alan-agius4]

npm create cloudflare@latest my-angular-app -- --framework=angular will create and configure an Angular SSR application with all the necessary things to be deployed on a cloudflare worker.

[cromefire]

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
The code looks too complicated though to burden the average developer with all of that. Seems like if the CommonEngine had no NodeJS dependencies, their code could be far more resilient and simpler.

[MickL]

npm create cloudflare@latest my-angular-app -- --framework=angular will create and configure an Angular SSR application

Sorry but where do you see SSR and / or Angular Universal?

Angular Universal is using @nguniversal/express-engine and Express alone is not possible on Cloudflare Workers.

Btw the initial issue is from 2020: angular/universal#1740