When using Renovate Bot for dependency updates in a releaseable project, you might find that adding the changelog update is not done for you. A developer needs to manually check out the renovate PR, run the changelog command e.g. yarn change, and commit the generated change files. This is tedious…
Every growing product faces the same challenge: inconsistent UI, duplicated code and design chaos. One team builds a button one way, another team builds it differently. Before you know it, your app looks like a patchwork of mismatched components. What is a Design System? A design system is a collection of reusable components,…
Migrating your Angular project to version 14 will automatically remove the defaultProject property in angular.json for single project workspaces. Let's understand what defaultProject is and when you might need it. What is default project in Angular? In Angular, a "default project" refers to the primary application or module within an…
Spring Boot is a powerful framework that simplifies the development of Java-based applications. One of its key features is the ability to easily incorporate external libraries into your project. By creating a bean of class from a Java library, you can easily inject it into a constructor instead of creating…
One of the most loved features of Angular is its ability to automatically update the view whenever data changes. This is thanks to the default Angular's change detection mechanism, which constantly checks for changes in data and updates the view accordingly. While this is great for most use cases, it…
In this post, I will show you how to set page title based on route in Angular. Angular provides a built-in Title service that we can use to set the title of the web page dynamically from code. We will use the title service in combination with router events to…
In this blog post, I will show you how to generate a routes file for prerendering an Angular Universal application. We will create a basic routes file and append routes dynamically from an XML sitemap ahead of running npm run prerender command when building the application. Pre-requisites This post assumes…
While upgrading Node from v12 to v16, I came across a problem with Angular unit tests where an exception would stop the test run with error Cannot read property 'range' of undefined. In this post, I'll explain the steps I took to identify the root cause of issue and propose…
Angular Universal gives superpowers to traditional Angular apps such as server-side rendering (SSR) and full features using Express.js server. This allows us to implement features like returning HTTP status codes in appropriate scenarios. In this post, I will show you how to set the HTTP status code from an Angular…
While updating my Angular Material Starter Template to Angular 14, I ran into an error causing broken builds. The console output seems to suggest this is a problem with Dialog module from Angular Component Dev Kit (CDK): Cannot resolve type entity i3.DialogModule to symbol. ./src/polyfills.ts - Error: Module build failed…
ng-deep is a special selector in Angular that you should use very carefully. I often come across ng-deep in code reviews, where I investigate further to see if it is really necessary. In this post, I will talk a little bit about ng-deep: what it does, where it is useful…
In this post, we'll look at how we can apply styles to html content rendered via innerHtml attribute. By default, styles defined in an Angular component only work in that specific component. This is due to the Emulated view encapsulation policy set by Angular. This logical scope is great because…