Posts

How to Detect Route Changes in Angular

In a current project at work, we need to be able to tell what the current route is in an Angular app regardless of which component is currently active. The code below does the trick. It's probably better suited for ngOnInit() than the constructor, but this still illustrates how to do it. In this example, we're just logging the URL to the console (this was just sample code I gave to one of the developers): export class AppComponent {   constructor ( private _router : Router ) {     this . _router . events . subscribe (( event : Event ) => {       if ( event instanceof NavigationEnd )         console . log ( "CURRENT URL: " , event . url );     });   } }

How to Specify an Angular FormControl as Non-Nullable and Also Include Validation with Typed Forms

I recently upgraded a project to Angular 14. It's been a long running project, created using Angular 4 (I think), and even though I've been upgrading the version of Angular as new versions are released, I only recently learned that the  tsconfig.json  settings were the same as they'd been when the project was created, so I took the opportunity to bring those up to the current standards as well. Unfortunately, with the stricter template type-checking in place, some of my existing code no longer compiled. I figured that this would be a great time to switch over to the new Typed Forms introduced in Angular 14. One thing that threw me off a bit was how I could create a FormControl that doesn't allow nulls, but that also includes validation. The official docs mention supplying the nonNullable  option, but I was confused as to how I could also include my regular validation functions as there didn't seem to be an overload that supported that. But by digging a little deeper

Configuring Your Angular Application to Use an External Configuration File

Image
Normally, developers use the environment.ts  and environment.prod.ts  files (and maybe even other permutations) to configure their Angular applications for different environments. With a deployment system such as Octopus , symbols can be placed in these files to replace values with environment-specific ones. But what if you want to build an Angular application for use by someone outside of such an environment? I ran into this problem recently when working on an application I have up on GitHub. I wanted to be able to provide a release that someone could easily configure without having to do a find/replace inside a JavaScript file. As long as the application is not offline, you can add a configuration file which gets distributed with your application and have the app read from it during initialization. First, create a new configuration file. In my case, I added config.json  under my src  folder: In this file, I currently just have a single configuration option: the URL to my API. {   &qu

The Most Destructive Keystrokes In Software Development Are The Ones Used For Copy/Paste

Image
Okay, so maybe the title of this post is a little over-dramatic. But the fact remains: copy/paste "coding" leads to problems, and is probably my least favorite bad coding practice (or the bane of my development experience! ). I think we've all been there: we don't know how to code something, so we do a quick search, either via search engine or in our existing codebase, to find an example, and then we copy and paste that example into the code we're currently working with. And sometimes, that's where it ends -- we've found our solution, and we move on with the rest of our coding. But often, just pasting that code in and moving along can have some unintended repercussions. Here's what can happen. A Lack of Understanding Sure, you've got code that works -- but do you know how  it works? Developers spend more time maintaining  code than initially developing it, and if you don't know how or why something works, it can make maintaining the code -- or

When Extending the TypeScript Date Object Doesn't Play Nice with zone.js

Image
I recently ran into an issue while upgrading an application from Angular 4 to Angular 13. It's been a monster of a project, made more complex by the fact that the app originally did not use the Angular CLI. One of the developers had introduced some extensions to TypeScript's Date object, to add additional methods to it, 2 of which were static. It's debatable whether or not this is a good approach, and you'll find many opinions online from those that don't like this approach. It's not one I'm comfortable with myself. But all was working fine until the upgrade. Once everything had been upgraded to Angular 13 and the latest version of TypeScript however, many of the unit tests that reference these methods (particularly one of the static ones we used frequently) began failing, saying that the method didn't exist. I verified everything was being imported correctly. It was working fine in another, up-to-date app, and I even set up a quick, working example in a

Resolving the Webpack Polyfills Breaking Change When Upgrading an Angular App

While working on upgrading an Angular application, which is several versions behind, to the latest version, I encountered the following error during build: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }' - install 'util' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "util": false } This was happening because one of the developers imported isNullOrUndefined  from util  in two components. I did some Googling, and found a few issues on GitHub, which included some various workarounds, and strangely enough, became heated  -- people were expressing hostility  over this issue, and the factors around it. But amidst all the chaos, one p

Retro Review: The Paul Lynde Halloween Special

Image
Synopsis '60s/'70s television mainstay hosts a Halloween show that is filled with singing, "humorous" skits, and everything else that was a staple of those gawdawful 1970s variety shows... Review ...and that's what I love about it. Where to begin, where to begin? Well, for starters, I wasn't super familiar with Paul Lynde, though I'm sure I'd caught his appearances on Bewitched  in re-runs when I was a kid (we had a local station in the area that would show sitcoms from that era in syndication). But the first I'd heard of this special was while reading something about the band KISS . They had appeared in the special. I'm a fan, and my brother-in-law is a real die-hard, one of those people who buys pretty much anything the band releases, be it music or other merchandise. After I'd learned about this special, I was over his house one day and asked if he knew about it. He replied that not only was he aware of it, he owned a copy, and asked if