Drag-n-drop in Angular as Observable

Observables are really fantastic and I learned to love them. The concept may be intimidating at first, especially the whole RxJS landscape. But it definitely pays off. Implementing drag and drop using Observables is actually quite simple and super handy. Here is my implementation. I also write for my future self, to save myself time. […]

Jest vs “import statement outside a module”

Jest can be very helpful framework when testing your application. Until it isn’t. Sometimes it gets in the way, and to configure it properly can be quite tricky. Problematic use case So, you have just learned that it is better to use specific imports instead of the { destruct } syntatx. Why? Because it makes […]

Do not throw Error in constructors

Suppose that you need to instantiate a class, which takes some dependencies as parameters in constructor. I am mostly using Angular, so those dependencies are some injectable services in my case. Something like this: What do you think will happen if you try to instantiate this class? What will happen with that Error? How will […]

ESLint sort-imports versus VS Code

Don’t get me wrong, both VS Code and ESLint are great tools, but sometimes they do not play nice together. Both have plugins, which are extending their functionality, and sometimes those plugins goes againts each other. One of such cases is ESLint and automatic sorting of imports in Typescript files. You can instruct VS Code […]

Problem with NGCC

NGCC stands for Angular Compatibility Compiler, which recompiles various npm packages to Ivy format. Most of the time it “just works”, expect when it does not. There are configuration options for ngcc, which you can specify in ngcc.config.js file in root folder of your project. But sometimes this seems not enough. Sometimes the same code […]

Load Image programatically with Promise

Image can be loading either in a standard way via setting the src property on the Image tag, or you can do it programatically. If you do it programatically, you can enhance the image loading with some magic, eg show a animated CSS placeholder while the image is being loaded. Or you can try several […]

Mock window.location in unit tests

When you run unit tests (I am using Jestjs) on functions which read window.location.href or window.location.search, you need to somehow mock the value. Problem is that when you try to edit the value of window.location.search it will not work. Neither will work overriding it by Object.defineProperty(). But there is a simple workaround solution, and that […]

Debugging NestJS app in NRWL NX workspace

Debugging can save you ton of time. But sometimes to set up debugging configuration correctly can be a nightmare. There are several common gotchas which may trick you. Code is in Typescript, but NodeJS in debugger does not understand its syntax. You use combination of .ts and .js files with import or export statement Debugger […]

Working with Angular i18n inside NRWL NX workspace

Angular v10 has great support for localization using the i18n attributes. I will not describe it, because that is already described in detail on official Angual site. What I found missing was how to integrate it with NRWL NX approach. Problems encountered For starters, the workspace.json has different structure than angular.json, so some parts are […]