Are you tired of long and unreadable relative imports in your Angular apps? I know I was! It turns out there’s a really quick and simple solution to moving from relative imports and to absolute imports.

The Solution

Open your tsconfig.json file (if you have a tsconfig.base.json file, which is usually found in Angular 9 or 10 and lower projects, open that file instead).

In the compiler options property, make sure you have your baseUrl set to ./.

{
...
"compilerOptions": {
"baseUrl": "./",
...
},
...
}

Lastly, add the absolute path aliases you want to map to various folders in…


If you’re like me and you love Angular and Angular Material, wait until you try development with the addition of TailwindCSS. If you haven’t heard about TailwindCSS, you should check out their site to see how this utility-first CSS framework can make web development lightning fast! I’m going to walk through how to set up an Angular application that uses both Angular Material and TailwindCSS. This tutorial was created using Angular version 10.0.6 and TailwindCSS version 1.6.2. …


This tutorial has been updated to support Angular 11 and TailwindCSS 2. TailwindCSS is a hot topic in the web development world and Angular devs want in on the action. I’ve been seeing developers asking how to use Angular and TailwindCSS together all over the internet, from Stack Overflow, to Twitter and blog post comments. If you haven’t heard of TailwindCSS, it is a fantastic utility-first CSS framework. If you want to build Angular apps fast, this is the framework for you! Continue reading for a simple explanation on how to integrate TailwindCSS with Angular.

Create Your Angular App

First, let’s create our angular…


You’ve probably heard a lot about RxJs, and more than likely used it in your Angular applications. If so, have you learned how to unsubscribe from observables? Do you know why it is important to do so? Not doing so ended up biting me in the butt. Read ahead for several simple ways on how you can properly unsubscribe from observables! You can also see these techniques in action here in this Stackblitz project.

Why is this important?

When I was first learning Angular and RxJs, I was having trouble understanding RxJs, and thus wrote this off. By unsubscribing from observables, you will prevent…


Do you have an Angular application where you need access to the previous url, but you’re stuck on how to get it? The answer is easier than you may think! Read below on how to get the previous url and then how to make it globally accessible throughout your application. You can also check out the code in this example here at my Stackblitz project.

Setting the previous URL

In Angular there is no out-of-the-box way to get the previous url. However, you can use the Router package Angular provides to make this work.

In your app.component.ts file make sure you import Router and…


In your Angular application, you probably have pages you only want authenticated users to access, but how can you control this? Angular route guards make this integration quick and easy.

Where to store your route guard

Before you create your first route guard, where should you store it in your application code? In your Angular application you might have an /auth directory that contains authentication-related files. The route guard will work in conjunction with an auth service that contains an HTTP request to your server (or a serverless SDK request) that determines the user’s authenticated state. The directory structure could look something like this:

src |_…

Jacob Neterer

Full time front-end web developer specializing in Angular. Always trying to learn new things. “There is no growth in the comfort zone…”

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store