Upgrading from Angular 11 to 12 problems and solutions

I was recently updating a very large enterprise project from Angular 11 to 12 using nx migrate. There were the expected changes from eslint to tslint, and the linting issues that show up under the new eslint to fix. There were also issues with Storybook, since this project also uses it and it needed updating from version 5 to 6.

The issue however came after all of those chores.

The issue happens at runtime where the running code throw an error that looks similar to the following:

[Insert stack trace example here] (Sorry all, I don’t have the stack trace here. If I run into it again I’ll update this post.)

While debugging this, I found that one library we are using was on Angular 11 and had a different (newer) version of rxjs in it. My debugging process started at a high level trying to find the source of the error, but eventually got to my commenting out large portions of the app so that I could narrow down the scope of where the error occurred. Eventually, once I had removed most of the app from running, the library that was causing the issue showed up in the stack trace. It took a while longer to confirm this was the culprit.

Luckily I was able to work with the other team and get the library updated to Angular 12 and update our project to the matching rxjs version. I did need to pull down the repo with that library, update it to Angular 12, and use npm link to test the library locally.

To do this I also needed to set useSymlinks to true in the builder options for the main project in order to use the linked library correctly. Once this was done, the project worked!

I am not sure what about the Angular 11 version of the project caused the issue, since from what I know of the Ivy compiler with the postinstall script, it should work okay. It frustrates me to know how to fix it, but not why it was broken. If anyone reading this has run into the same issue and knows why, I would love to know.

Coming back to myself and Dyson Fall

single cab pickup truck

Things have been interesting for me of late. I am sure that with the ongoing COVID 19 pandemic, that they are interesting for everyone in their own way. My interesting has been trying to find myself again, trying to find a better balance with working remotely, life, and rediscovering the things that I enjoy.

I have been working remotely for more than seven years, so this isn’t anything new. Not being able to visit with other people in person often, being cautious about where I go, and how often. That is very different. However, it’s likely not a different experience for many of you who have dealt with it in the last year and a half.

I found myself working, then getting off of work and not really knowing what to do with myself. I’d nap, watch YouTube, and generally be lazy. I was quite listless in my off work hours. I decided that needed to stop, it wasn’t healthy and was wasting time I could spend doing something fun or productive. I have been gradually fighting back to do something other than nothing.

I started Lair of Secrets with Ken Newquist last year and we’ve been slowly making the show better and more on a schedule. Though picking up kids, scout meetings, migraines, and other life issues does still get in the way, we don’t show any sign of stopping. Tonight we’ll be going over our plans for a season two.

My gaming has been very spotty, mainly due to life/scheduling issues. Last year though, I really wanted to get back into some of the old games that I enjoyed. Gamma World has always been a favorite. Having grown up in the Cold War era, it offered a hope of life after the bomb. Mixed with other video games of the time (Wasteland on the Apple IIe being a prime one) and my prolific reading during those years, Gamma World was one of the games I never really got to play but would spin adventures and characters in my head constantly.

So over the last year or so, part of my brain has been dedicated to a game I am calling Dyson Fall. I want the game to be about the hope and exploration that I felt back then when reading and creating for Gamma World all those years ago.

One of my main inspirations in the modern day are Kipo and the Wonderbeasts. It’s a great cartoon that is at it’s core is about hope and making friends, even when those friends might look like enemies at the start. Once you get to know those people, you realize that they all have their troubles, and sometimes helping them through those troubles can turn them from an enemy into a friend or ally.

So Dyson Fall is about hope and growing a community. It is has the trappings of exploration of strange and wonderful or terrifying places, weird mutations, and the strange friends you make along the way.

I am using the Mythic d6 system by Khepera Publishing and my friend Jerry Grayson. I’m using it because it’s a skill based system, and as Jerry puts it, “all RPGs are super hero games”. Dyson Fall, with all of it’s Thundarr the Barbarian weirdness is definitely a post-apocalyptic super hero game.

Currently I have a small playtest group that has been kind enough to help me test out different scenarios for how the game will play. We unfortunately haven’t been able to play much, see my gaming scheduling woes above, but it has always been productive and given me more to think on after every session.

Using the micro frontend pattern in Angular (11)

This is mainly for my own archival purposes, collecting all of the information I have gathered on MFEs in Angular in one place. If it helps you, great, let me know!

I started this post in Angular 11, 12 has since come out and made many of the steps easier since it automatically uses Webpack 5 with Module Federation.

https://go.nrwl.io/angular-enterprise-monorepo-patterns-new-book

https://medium.com/agorapulse-stories/building-a-micro-frontends-architecture-in-2021-with-angular-and-webpack-module-federation-50d073617645

https://indepth.dev/posts/1173/webpack-5-module-federation-a-game-changer-in-javascript-architecture

https://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-module-federation-in-webpack-5/

https://angular.io/guide/elements

https://single-spa.js.org/

https://codeburst.io/breaking-a-large-angular-app-into-microfrontends-fb8f985d549f

https://blog.bitsrc.io/the-dilemma-of-code-reuse-in-microservices-a925ff2b9981

https://www.rapidvaluesolutions.com/implementing-micro-frontend-architecture-with-angular-for-increased-team-productivity/

https://www.angulararchitects.io/aktuelles/6-steps-to-your-angular-based-microfrontend-shell/

Digging into CSS variables at runtime

I’ve had a need to be able to see how multiple CSS variables are computed at runtime. I’m dealing with interactions between SCSS and CSS variables so I needed to know what was happening. There are a few ways to do this in Chrome Dev Tools.

One way is in the Styles inspector, you can see the various definitions of the variable as values are assigned to it.

Another way is using the Computed inspector with the Show All checkbox checked. This will show all of the variables.

Both methods can use the Filter box to narrow down what you are looking at.

%d bloggers like this: