Angular is a well-known TypeScript-based frontend framework used to build scalable single-page applications. Although new frameworks like React have taken over frontend development, Angular is still one of the best frameworks to start a new web-based project.
I've been working with Angular for a significant period, and it has some great features with constant updates. However, Angular is not a silver bullet. It has some significant drawbacks and challenges that bring nightmares to developers.
Personally, I have also faced some of these nightmares when using Angular. As we all know the spooky season doesn't end with Halloween, so I think this is a good time as any to share them with you. So, in this article, I'll share my Angular nightmares, the ones that make my skin crawl.
1. Migrating from AngularJS to Angular
Without a doubt, this is the biggest nightmare of any Angular developer. But before discussing it, let's look at the Angular version history.
Between 2010 and 2016, many companies opted to use Angular for their applications. Once the newer versions were introduced, most companies decided to stick to AngularJS while some revamped their application with new versions. But, as time passed, it became harder to maintain AngularJS applications due to the lack of updates, third-party library support, and developer interests. So, the need to migrate became essential for many applications.
There are three approaches we can use to migrate from AngularJS to Angular:
Rewriting the application.
Updating the existing application.
Following a hybrid model.
Rewriting the Application
Rewriting an application is almost identical to creating a new application. This road is taken when the old application has outdated libraries, design principles, or design patterns. In such cases, trying to update the application will be more complicated than creating a new application.
However, rewriting an application can take a significant amount of time and effort from your development team. Hence this approach is not suitable for large-scale applications. On the other hand, rewriting the application will give you the flexibility and freedom to organise the codebase as you prefer. Also, you can use modern application development principles and designs in the new application.
Updating the Existing Application
Updating the existing application is the easiest way to migrate from AngularJS to Angular. You can use this approach to any scale application, and it will not take as much time and effort as rewriting. But updating doesn't give you the same flexibility as rewriting to add modern concepts.
In addition, you need to divide the application into parts and gradually update while testing to ensure all the functionalities are working as expected after the update. This approach is most suitable for large-scale applications, since rewriting them can take ages.
Following a Hybrid Model
Updating or rewriting an application requires developers to put in extra effort or delay any ongoing implementation since they need to focus on the migration. But, sometimes, the organisation or the clients can't afford to delay new implementations or hire a separate team for the migration. In such situations, you'll have to follow a hybrid model.
In the hybrid model, you have to keep the old AngularJS code without any change and implement new modules using a newer Angular version. Compared to the other 2, this approach will take significantly less configuration time. However, you'll have to maintain separate libraries, specifically configure things like routing, styling, and translations for both Angular versions.
As you can understand, there is no perfect migration method. Before making a decision, you have to consider the advantages and disadvantages of these approaches, project requirements, time frame, client concerns, and many other things. That's why migrating from AnguarJS to Angular has become such a nightmare for developers.
But sometimes, there can be a specific library you need to use which doesn't provide a TypeScript-compatible version. You must manually handle such situations by creating a local declaration. Installing an unsupported library without making a local declaration can cause unexpected errors in the application. You might spend significant time resolving these errors without identifying the root cause.
1. Adding to index.html
Include the library in the
index.html file using a