Angular is one of the best frontend framework out on the web today. Googles Angular team did their best to rewrite the framework and today we have a great tool for developing awesome single page applications. I will assume that you have a basic to intermediate knowledge of Angular at least before you delve deep into this article.

This article outlines the practices we use in our application. Well also go through some general coding guidelines to help make the application cleaner.

1 Modular approach in Angular App Angular provides us to create our app in modular fashion. As your application grows it becomes cumbersome to manage the different parts of an application. Modules in angular are a great way to share and reuse code across your application. Lets start with default module of angular app i e AppModule.

a App Module Angular Default Module App module is the root module of any angular app. Every application has at least one Angular module the root module that you bootstrap to launch the application.

b Shared Module Shared module can have components directives and pipes that will be shared across multiple modules and components but not the entire app necessarily.

c Feature Module A feature module is an angular ordinary module for specific feature. The main aim for feature modules is delimiting the functionality that focuses on particular internal business inside a dedicated module in order to achieve modularity. In addition it restricts the responsibilities of the root module and assists to keep it thin. Another advantage it enables to define multiple directives with an identical selector which means avoiding from directive conflicts.

2 Use of lazy loading a feature module Angular best feature of feature module is its lazy loading. Lazy loading of any feature module is achieved by angular routing. In other words a feature module wont be loaded initially but when you decide to initiate it. Therefore making an initial load of the Angular app faster too It is a nifty feature. Here is an example on how to initiate a lazy loaded feature module via approutingmodulets file.

3 Shortening the import path Sometimes we import paths are very long like this import xyzservice from xyzxyzservice This is not the ideal situation to use this nested path. You can shorten this import path by doing this setting in tsconfigjson file. Set the app and env variables in this file. Once you have set up these path you can now use short import path like this import xyzservice from appxyzxyzservice import environment from envenvironment You can check this link as well for more information.

4 Typings One of the cool feature of Typescript is combining the multiple data types to make it easier to work. In the above code createdDate can be string or Date. You can also restrict the value of a field to a union of allowed string values.

5 Component Inheritance Component inheritance lets you encapsulate common code in a base component and extend it in child components. Most of the time for sharing functionality or data we use services or providers across the different components. Instead of repeating common UI functionality you can use inherited components.

6 Use Namespace to import multiple interfaces Organize interfaces into a TypeScript namespace and reference them via the namespace to avoid long import lists.

7 Delegate complex expression from template to component class file In order to make our template simple and understandable we try not to write any complex logic expression in our component template file. If we are checking just expression like simple compare or evaluate true or false value then it is fine to write in our template file. If our expression is longer and complex then it is better to move this from template to component class file. Avoid complex logic in templates move it to component methods for clarity and testability.

8 Global Error Handling To catch synchronous errors in our code we can use trycatch block. If error is thrown in our try block we can catch it in catch block. But this is not an ideal situation to write trycatch everywhere. We need global error handling. Angular provides a hook for centralized exception handling through ErrorHandler which we can override.

9 Use HttpInterceptor to handle all http errors Intercepts HttpRequest or HttpResponse and handles them. It provides a way to intercept HTTP requests and responses to transform or handle them before passing them along. We can retry HTTP calls handle timeouts check status codes like 401 refresh tokens and redirect users as needed.

10 Perform multiple Http requests using ForkJoin There are some use cases when we need to perform multiple http requests at once wait until all requests are completed and then proceed next just like synchronous http calls. Angular provides this feature with the help of ForkJoin. ForkJoin waits for each HTTP request to complete and groups all the observables returned by each HTTP call into a single observable array and finally return that observable array. At the component level you subscribe to a single observable array and save the responses separately.

Summary In this blog we have learned about best practices to create any angular app. These practices help you to write efficient and clean code for Angular single page applications.