Modern web development services such as package managers (i.e. npm), CLIs (command-line interfaces) and code editor features like plugins and formatters undeniably make our coding lives much easier and saner. That 'automagical' sense of satisfaction you get by having your document auto-formatted each time you save. Or the ease with which you can install specific tools or rapidly generate boilerplate code so that you can focus on what you are actually doing is fantastic.
That being said, every now and then, while cruising on the developer tools highway you hit a pothole you did not see coming! I spent the better part of yesterday first trying to fix my app's build which, out of the blue, refused to build. Then, after finally resolving that issue, my code editor's format-on-save feature was replacing all my single-quotes with double-quotes all the while my linter was shouting at me to make them all single-quotes again...
Needless to say, I spent several hours trying to untangle the threads. In the end, as with many programming related difficulties, the solutions were very straight-forward, but as always, the journey towards those solutions was not!
As a front-end web developer, I have long been attracted to 'building a mobile app'. As such, with my experience in the Angular ecosystem, I have been working with Ionic v4. In essence, Ionic is a bridge on top of native features. To my mind, working with Ionic is very much like using Bootstrap to build the interface and very much like Angular to build the rest. Similarly, Ionic has it's own CLI layered on top of the Angular CLI. For those that are familiar, you run your app by executing:
ionic serve
At a point in the day, I was looking into using the so-called PWA Elements plugin to provide access to the local machine's Camera functionality. I ran:
npm install @ionic/pwa-elements
And carried working. I then ran ionic serve and next thing noticed my build was not working. Reading the error message was not particularly enlightening either. In bright read it said the following:
Schema validation failed with the following errors:
Data path ".builders['app-shell']" should have required property 'class'.
[ERROR] ng has unexpectedly closed (exit code 1).
The Ionic CLI will exit.
I searched within my project for ".builders['app-shell']" to see if that would shed some light. No luck. I then Googled the message which quickly lead me to posts about inconsistencies between the version of the Angular CLI and a package known as @angular-devkit/angular-build. The solutions posted were straight-forward, basically, change the angular-build version and run npm install again. I tried this several times without success. Along the way I tried variations on the versions suggested as well as repeatedly removing my node_modules and re-installing them. I even went so far as to delete my local copy of the app, cloning it from repo and running it again. Still no luck. I then went so far as to clear my npm cache. But still, I kept getting the strange red error message.
At this point I decided to try the regular ng serve command, which then threw up a much larger error not saying much, but saying a whole lot about rxjs. Sigh. In the end, after changing version numbers I noticed the error message had now changed from:
Data path ".builders['app-shell']" should have required property 'class'.
to:
Data path '''' should NOT have additional properties (es5BrowserSupport)
Ok! Great! This was progress. Catching onto the es5BrowserSupport, I searched for this in my project. Not found. Googling this, I found posts mentioning that this was a field used by a certain version of Angular CLI within the angular.json file. Searching for this in my own, I did not find this in my angular.json file. So it did not seem to be the issue. After much failure, I looped back to this particular point and decided to add the field to my file. Again, no noticeable impact. However, once I removed the field and ran the build... voila! It worked!
Relief.
Overjoyed that I could suddenly return to actual coding, I wroted some code, hit save and suddenly my file was auto-formatted precisely not how I wanted it! Ugh! I see a rabbit hole, I descend.
Now, I need to mention this, some time ago, I got really into my VS Code plugins and auto-formatting. At the time I was trying out a few different libraries such as React and Vue and as such, need to apply some work to my VS Code config. Admittedly, once I had it doing what I wanted between the various libraries and file types, i.e. .js, .ts, .jsx, .vue etc along with their associated code completiong, hinting and linting etc. I was quite chuffed with what I had! Since then, I have left it alone.
Whether this is a blessing, a curse or a fatal sign of shallow-learning I don't know. But during my daily coding life, I come across a seemingly endless myriad of troubles. Over time, these develop into a way of problem-solving, or searching for solutions that I believe is of value in the wider sense. That being said, I also forget a hell of a lot. Now, faced with sudden auto-format violation of my documents, I realised that, for the life of me, I could not remember what I had done, or how I had set it up. Nevermind what had suddenly happened to change my previous settings!
In the end, it took me retracing my steps and memory to how VS Code editor settings work. At the time, it was getting late and I managed to fix my quote formatting problem. Whether any other of my auto-formatting settings have been disturbed I am not sure since I took that as a sign to call it a day.
Long story short, all this auto-magical automation and tooling is great! It just works! Sometimes, you know why, at others you don't. The problem is that when it doesn't work, it is often not clear why and the path to resolving it can sometimes not be very satisfying. At this point, I am still not sure why my build stopped working - yes, versions, but how and why did they change?
As for the formatting, again, I don't know what happened? Did I mysteriously press some kind of key combination that switched something in my editor that I did not notice? Did me closing down several workspaces and removing old projects from my view lead me to somehow changing an obscure setting in my editor?
I don't know.
What I do know, is that auto-magical could, also, in the worst case, lead one to auto-destruct if you are not careful!