New gen JavaScript based frameworks like angular have been created to overcome the shortcomings of JavaScript. Often developers who are new to these frameworks implements old JavaScript code, instead of using new features of Angular. Here are some avoidable scenarios.

1. Avoiding Observables to use Async awaits and promises.

   Async await is a JavaScript feature for asynchronous operations. But angular comes with a better and more powerful library Rxjs. Async await cannot cancel the operation once it is executed while Rxjs can cancel it. Async await only supports a single emission for a call, But Rxjs can run for any number of times.

   When you already have a better library like Rxjs, it makes no sense to use async await. Since Angular is based on JavaScript async await will surely run on Angular. But it doesn’t mean that You should be using it. Whatever async await can do, Rxjs can do better and even more.

2. Using reactive forms and template driven forms together

   Some developers seems to use reactive forms and template driven forms together.

   Reactive forms are guided by the principle of 'one-way' data binding, which involves managing the state of forms using an immutable approach. This means that changes to the form state are made in a way that prevents them from being directly modified after they are initially set. By following this approach, there is a clearer separation of concerns between the template, which defines the form structure, and the component logic, which handles form behavior and interactions. This separation enhances maintainability and readability of the codebase, making it easier to understand and maintain.

   The ngModel directive will keep track of the value typed in by the user with each key pressed, and it will also keep track of the validity state of that particular form control only. NgModel adheres to ‘two-way’ binding.

   While running this angular produces a warning in development mode

   Actually reactive forms are a better and more feature rich version of template driven form

3. Creating common service for calling Api

   Angular is built over typescript which is a strongly typed language. Which means there is stricter typing rules at compile time, which implies that errors and exceptions are more likely to happen during compilation. Most of these rules affect variable assignment, function return values, procedure arguments and function calling.

   When common service is created for all Api calls the type is given as any in usual cases which discards the benefits of strong typing.

4. Not using angular cli to create new files

   If you doesn’t use angular cli, there is higher chance that the naming convention is broken somewhere, making the code less readable.

5. Creating one single module for all shared components

   Many developers add all shared component to a single module and calls it shared module. This in fact increase the load on the page and makes rendering slower. The components that are not required for the current page is loaded from the shared module. With standalone component this issue is almost solved. But in angular apps using old version this issue exists.

The best solution to fix this is even though all shared components are
in a shared folder, each component should have it’s on module. So only
one module needs to be imported for that particular component. Or to
make things much simpler update to newer versions.

Conclusion

When a framework provide you with new feature make utmost use of it, Instead of sticking to the old methods you are used to. The leaning process is beneficial for the developer.