Developing web apps using Angular and other frameworks and languages can be sometime a daunting task. You need to write thousands of lines of code and sometime rewrite countless times some of them, to achieve a common goal. Today, I am going to share some Tips to make your development work less daunting. Most – if not all – of these tips are applicable to other JavaScript frameworks and Programming in general but for the sake of simplicity (and my sanity) I will concentrate on Angular and TypeScript.

Build Libraries for use in your Projects

If you are an active angular developer, you will always be working on multiple projects at any given time. While most projects are unique in their designs, there are those overlapping aspects which are shared across most if not all projects. You can make it easier by building libraries for the shared features and use them across multiple projects that needs them. This could potentially save you a lot of copy-pasting and testing hours. It also makes it easier to update the code and upgrade to newer versions of Angular without necessarily breaking old applications. Even better, you could open-source the libraries and have other developers, use, contribute and enrich your libraries. And with angular 6, it is even easier to build, package and deploy libraries. If you are looking to get started, here are some tutorials to help you.

Always Write Test (Both End to End and Unit Testing)

This may sound obvious to experienced developers, but it’s not, especially to beginners and intermediate ones. Writing Tests is a time-consuming activity that most developers don’t see the need for. Sometimes, you are just working on small project and other times working on a tight deadline. Before you know it, the project is so large, in such a way writing tests has become an enormous task. So, the rule of the thumb is, write tests for all your projects. If you are looking to get started with testing, I suggest the official documentation of Angular.

User Alias for Imports

Have you ever tried to restructure your code by moving things around in an Angular CLI Workspace? You end up having to update so many components, services, modules etc. that imported those items. This may not be a problem in a small project but in a huge project it can be time-consuming. You can make this easier by using aliases. Instead of using a relative path to your service:

import { someservice } from ‘../../../services/some.service’;

You can instead user an alias that points to your services:

import { someservice } from ‘@myservices’;

To achieve this, first, you need to create a TypeScript files for exporting all your services – let’s call it services.ts. Then export all the services we want from inside this file:

export * from './some.service';
export * from './some.other.service';

After that, modify the typescript configuration (tsconfig.json) and add a reference to our service.ts under our paths:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    // ...
    "paths": {
      "@services": ["src/app/services/services"],
  }
}

This way, any changes to the path of a service (like moving it somewhere else or just renaming it), then all you need to do is reflect the new location inside the service.ts file.

Write Readable Code

We have all been there, when you spend a lot of time trying to figure out what a block of code does. Or wondering what that variable with an ambiguous name does. Poorly written code is not only a problem to other developers who will read your code but even to you. When you come back to your code after a while and start wondering – what did I want to achieve here or how or what’s does this do? Then you should review your coding habit – I am also guilty about this [bummer].

I would love to go on about this, but it will turn out to be a rant which is not helpful to anyone. Instead, I advise you to watch John Papa presentation on readable code on ng-conf below.

Always use Static Type and Interfaces for your objects

In TypeScript, Interfaces define the type of content and shape an object can have. For instance, If the object is a list of students, then it might have a name, age, class etc. inside. So, what an interface does is define, the object must have a name, age and class. In this case, name and class are of type string while age is a number. By using interface and static types in your code, you will be able to catch a good number of errors that may arise due to type mismatch – like trying to multiply a string and a number.

But, the main reason I am suggesting this – in the context of this post – is, when you are using a good text editor (i.e. VS Code, Atom, Sublime etc.) you will be able to receive Intellisense (auto-completion, error checking and navigation) right inside your angular templates (You will need Angular Language Service for that).

This gives you a piece of mind that your variables are correctly reflected inside the template. There are no stupid errors misspelling errors. That’s time and effort saved that you can use elsewhere. This is not an exhaustive list, if you have a tip to share, post it in the comment section for others who will come after you.