Angular Universal is the Problem, not Angular
Tags: webdev, angular, angularuniversal, javascript
Published: 2023-03-26 16:28:03

Angular is finally working hard be something we can continue to use. I absolutely love Angular! Some of the new features we know they are working on include:

- [Standalone Components](https://angular.io/guide/standalone-components) - This is huge, as it allows you to get rid of more boiler plate modules. This makes it easier to use and closer to functional components.
- [Optional Zone.js](https://angular.io/guide/zone#noopzone) - While not completely implemented yet, this will allow smaller packages, and better direct control of rendering.
- [OnPush Change Detection](https://angular.io/api/core/ChangeDetectorRef#usage-notes) - This is already implemented, and gives you direct control of DOM updates. However, you will have to handle them yourself. This is a good thing.
- [Signals](https://github.com/angular/angular/discussions/49090) - While already implemented, this gives you exact control of what state you want to update in the DOM. Angular is currently building ways to makes this integration seamless with RXJS.

These are just some of the features, experimental features, and partially implemented features Angular is currently working on. You can view the [Roadmap](https://angular.io/guide/roadmap), although it hasn't been updated this year. It is best to follow the [Releases](https://github.com/angular/angular/releases) and their [Twitter](https://twitter.com/angular).

This is wonderful, and the Angular team has been working extremely hard as they continue to innovate.

## However...

The best contribution to Angular in the last year has invariably been the creation of [AnalogJS](https://analogjs.org/). But why? You can now do things like File Based Routing, use Vite for faster compilation (and yes, ENV variable support out-of-the-box!), and SSR Support.

It doesn't yet support server only routes, form actions, or automatic handling of complex hydration items like [transferState](https://code.build/p/tGmoYJkXXuKeM8XdsitRr/how-to-make-angular-universal-behave-like-nextjs), but it is an incredible meta framework. I suspect [Brandon](https://twitter.com/brandontroberts) will be looking into some of these things.

## But Why is Angular Universal the Problem?

Let's put it this way. React is Dead. React is held up by the many innovations from the NextJS team at Vercel. The slowest two Frameworks by far are React and Angular, but no one talks about this. Everyone just assumes React is badass because it is the most popular. There are not a lot of tests these days, but I suspect in larger apps, Angular is way faster than React. Angular has everything built-in, and most tests seem to be basic todo apps. React has to install many external libraries just to function (because it is a library of course).

No, the reason Angular is supposedly dying (trendy influencers are ignorant that it is still the second most popular and mature framework) is because it is not on the SSR Train.

Sure, other Frameworks are smaller, faster, and have incredible new innovations, but that is not why they are popular. They all handle the basics extremely well making the DX faster. Solid Start, Qwik City, NextJS / Remix, SvelteKit, NuxtJS. Literally all of them *except* Angular Universal.

## What Angular Universal Needs...

The Angular Core is already incredibly strong, has mature external packages, and has a great team backed by Google...

**But...**

Angular Universal is still 10 years behind, and not even on the serverless train!

Here are the basic things it needs:
- File Based Routing - better DX experience
- ENV Variable Support - you seriously can't do this currently in Angular without a hack or adding webpack
- Automatic TransferState - TransferState is way too complicated and should be automatic (like all other frameworks) so that the Developer doesn't have to think about it. This would work with shared server / browser components.
- Server Only Routes / Endpoints - Creating a route manually is inefficient, and should be easy. I should also be able to import components into the server.
- More deploy options - you can deploy to Firebase Functions or Cloud Run, but there should be options (or adapters) for Vercel, Netlify, Cloudflare, and more... 
- Code Splitting Components - this would be necessary to deploy to Edge servers and other serverless environments, as each component would be in its own serverless function (how every other framwork works)
- Type-Safe Form Actions - this gets rid of extraneous endpoints, and would allow you to submit your forms to the server to update your pages... this should work like TRPC with type safety, and be seamless from the server to the browser. It would also have to handle refreshing the page

This is where Angular should focus its time. Without heading in the SSR first direction, I do believe Angular will die one day for web applications.

Do you agree?

Again, all other popular frameworks have meta-frameworks with these options, or a version of them.

See some more articles and things I'm building on [code.build](https://code.build).

J