For 2023, Team Angular has made a lot of important changes which were asked for by the community, and that’s insanely awesome. But it wasn’t always like this.

In this story, I’d like to tell you about my 4 years experience of using Angular. First of all, I think Angular should not be your first technology to develop applications.

I want to highlight the problems which Angular creates and how they affect developers and team building. I will also try to give solutions to the problems I have identified if you already use Angular or want to use it.

Unfortunately, some teams or even companies are slow to upgrade for one reason or another, and you may find applications on Angular 8, 9 or 12. Therefore some of the issues outlined here can still be relevant.

If you are a junior developer, this article may also be useful for you and will help you with choosing your first development stack.

At the one moment, i may seem criticizing declarative approaches implemented by the Angular team — not at all. I don’t question that over time any low-level code becomes high-level code via abstraction and new features, making our work easier. Each new UI library tries to solve the problems of current libraries and offers improvements, providing growth and quality tools from year to year

The convenience trap

As we know, Angular is a UI framework, not a library. It positions itself as a self-contained solution for front-end application development. You don’t have a “zoo of technology” from app to app, everything is uniform and monotonous, but there is a downside to this. It’s easy to get used to the conveniences that Angular provides, and it gets more difficult to give them up later on.

ReactiveForms

At one time, the approach proposed by the Angular team, the form and its control are separated into an HTML-template and a JS-controller, really proved to be handy for form development.

The problem is different, we are so used to relying on validation from ReactiveForms that we forget that HTML natively provides us with all the attributes we need to validate input fields — min, max, pattern, required, readonly, etc.

What is this problem? — Once you get beyond Angular, it turns out that ReactiveForms doesn’t exist as a standalone library. You’ll have to re-learn how to develop forms — events (submit,change) and input field attributes.

Building an application

You don’t need to customize the application build, just run the “build” or “serve” commands to get started. You do not see the webpack.config.js or vite.config.js configuration files of the builder.

Can you say:

• How is your application built?

• Which file is the entry point?

• Which tool builds your application?

• How do your SCSS files become CSS?

• How does HRM work?

If you work only with Angular, you missed the growth stage of gaining the skill to build an application. Webpack, Gulp, Rollup, Vite, Esbuild — you just don’t know it. If you’re asked to create a simple web page in HTML and SCSS without Angular — probably you can’t.

HTTP client

This is a convenient wrapper over XHR using the Observable pattern, given the recent XHR2 feature for SSR. It allows us to make queries with multiple parameters, track the progress of the query, and be able to convert the response to the desired data type with just a single parameter.

But as an angular developer, would you be able to say:

• When was the last time you used native methods to handle HTTP — fetch or XHR?

• Can you handle requests and errors globally without using an Interceptor?

• Can you name ways to undo an HTTP-request without using switchMap?

• Do you know of axios or node-fetch libraries?

Despite the convenience, we should know how to make queries without Angular. It surprises me when even Senior developers don’t know how to make a request before bootstrap application or about the existence of RxJS.Ajax

We must have an understanding of the essence of the request and response to be able to:

• Handle errors

• Parse the response

• Track the progress of the request

• Work with FormData

read more...