Top 11 Most Common Angular Developer Mistakes

6 min readJul 5, 2021

Direct DOM Manipulation

DOM manipulation is a common task in development. So, it is only natural that a developer working with Angular application development will follow the same process. However, it should not be done with Angular. Hacking the DOM directly is the easier way, but it is not the right way with DOM. This is because Angular has evolved to become a platform from a simple web framework. Due to this, the applications built with Angular can be decoupled from the renderer. This paves the way for several other possibilities that you can work on, the major one being using AOT or Ahead of Time compilation. Using AOT removes the need to use the bulky Angular compiler, consequently reducing the development time and size.

So, to leverage the circle of opportunities created by this approach, you must not commit this Angular error and start hustling with DOM directly.

Using jQuery with Angular

Another one of the basic Angular mistakes is using jQuery, which is again related to DOM Manipulation. Even though Angular and jQuery have the same parent, JavaScript, they are built with a different purpose, and you should not measure them with the same yardstick. Instead of using the many other and better features present in Angular, the developers tend to stick to jQuery. The trouble here is that when you stick to jQuery, the framework won’t know that DOM has been manipulated with jQuery.

So, when it renders and compiles the application interface, there will be some unwanted effects. Even worse, you may not also know from where these mistakes are arising because you took the wrong path for DOM manipulation.

Declaring the Same Component in More than One NgModule

With Angular, you need to declare every component is an individual NgModule. Moreover, all these modules must be listed in the @Mgmodule.declarations array. This must be done to ensure that the View renders every component separately. On the contrary, the Angular application developers do not follow this format and declare one component in multiple NgModules or vice versa. Even if there is a need to notify about one component in different NgModules, you need to instruct their relationship clearly and include it in the codebase. For instance, if the relationship between two modules is that of a parent-child. You must state the HeroComponent in the child module with the child’s NgModule.declaration.

Then use the child’s NGModule.exports array to forward/export the HeroComponent and parent’s NGModule.imports to call/import. Hence, the task is to clearly state every component’s position, function, and relationship with the module in which you are inserting.

Not Unsubscribing from the listed events

Working on Angular is easy, but managing your work can become difficult, especially if you make basic Angular mistakes. There are plenty of Angular functions for which you may need to subscribe to an event, tutorial, etc. Making this mistake seems even more susceptible when you have several libraries and optimizing strategies that are specifically built to help you unsubscribe. The simple task is to unsubscribe from a Angular service or an event after your purpose is fulfilled.

Not doing so means that you are allowing memory leaks to happen, which can easily manifest into a bigger problem. Well, if you have not learned it before, here are two ways to do the same.

Initiate an OnDestroy Lifecycle hook for subscribed components that you have started.
Create a Lifecycle Hook for the services subscribed that were previously subscribed.

The central idea is to unsubscribe after your development work is complete.

Not Using the Angular Tools

If you were to ask a developer from the 1990s what they had to do to create a simple static web page, you would call yourself lucky. Working with Angular functions or with any other development technology today would have become easier due to the presence of a myriad of tools specific to every technology.

Angular has Protractor, Test Whiz, etc., which are meant to streamline the development tasks. One of the Angular developer mistakes is not using these tools and making the entire exercise difficult for themselves. So, start using them.

ngOnChanges misconceptions

The purpose of ngOnChanges is to trigger an action when the inputs to the code are modified or changed. As it is a lifecycle hook, using ngOnChanges in Angular is a basic step that every developer learns and uses. However, the mistake we make is by believing that this feature is effective in every use case. Believing this is not only one of the basic Angular mistakes but also a limitation in the development scenario. ngOnChanges is not effective in every scenario as it only has one-way use. This means that the ngOnChanges will only work when the entire object changes. It will not manifest if you are modifying a single field or property in the development process.

However, if you want to ensure updates after every change in the field or property, the right way is to use ngDoCheck. Here too, make sure that you clearly notify what it is that you want to receive updates about. This is because ngDoCheck is used frequently, and you don’t want to commit another one of the common Angular mistakes by creating confusing commands.

Failing to Organize the Codes

Code organization is a skill that developers learn only with effective experience. There are a lot of Angular functions that need to be coded, and this increases the scripting code to a great extent. Longer code scripts make it difficult to organize them. However, this does not mean that you can skip organizing the code. This is another one of the Angular development mistakes you don’t want to commit. Although, we know that it is a difficult task because Angular works on the MVC Angular architecture, which increases the amount of code required substantially. Also, the MVC architecture puts a lot of stress on the controller, which also makes this difficult. Because there are numerous Angular functions that you can use, the developers also get carried away with inserting and writing everything they can and then finding it difficult to organize. Extensive coding also makes it difficult to test the script for errors. On the contrary, when the code is organized into modules, it is easier to find the errors, and it also looks clean.

Not Using Batarang

First, what is Batarang? For those who don’t know, Batarang is a Chrome extension used by Angular developers for debugging and finding out mistakes in the code. So, an extension that helps in ensuring that you write an effective code is a mistake in itself. Secondly, the major benefit of Batarang is abstracting scopes in the event of restricting arguments. Finding these arguments without Batarang requires an extensive amount of work. However, if you can use Batarang, finding such errors will become easier and faster. So, yes, not using Batarang does amount to one of the common Angular mistakes.

Using Client-side Pagination

Companies that use Angular functions use data rendering to maintain the bulk data within the application. Within data rendering, they use client-side pagination to load the application, which is a suitable approach, but only if the amount of data is less. Vast amounts of data makes things difficult as client-side pagination renders the entire data from end to end. This increases the time and amount of work, which amounts to another Angular error you may come across. The alternative is to use server-side pagination, especially if there is huge amounts of data to be rendered. With this method, you can render a specific page number or load any record required to give clear instructions.

Not Examining the Application Before Launch

It is required by every developer that he/she examines the application before launching. Writing the code for an application can be a daunting task, no doubt about that. But imaging if you have spent days writing the code and it does not work as required, frustrating, right? Well, if you examine the application before launching, things will get easier to determine, and you will have a successful Angular application launch. There are several ways at your disposal to work on these aspects, so use them.

Not Testing the Application Properly

Web applications are platform-agnostic, which is one of the best advantages of creating them. Because the application you have built has cross-platform compatibility, you need to test it against different browsers. This is one of the Angular developer mistakes. But any developer can commit them with any development technology that helps to create cross-platform or cross-browser solutions. You need to test the application with different environments. Some of the tools that you can use for this include LambdaTest tools or Browser Stack testing systems. You will find a plethora of tools to do this sort of testing. So, make sure not to make this mistake in the future.