Unexpected '/'. Escaping special characters with \ may help - Angular 12 build/deploy

Question

I've updated my codebase from Angular 11 to 12 recently, and after that, I just can't deploy my code. I can run ng build and ng serve and it works flawlessly, however, when I run ng build --prod I keep getting the following error, probably because of optimizations (minify) made for prod version:

The file D:\Code\Airbox\frontend\styles.670357240e7c04682d1d.css:9031:1 does not exist, it's apparently created by the deploy script but I can't see or access it. I've tried to remove comments and imports from my global css file, but the problem keeps happening.

I couldn't find any solution for it across the internet, and I have no clue of what is going on or how I could find a work around.

Answer 1

Found a work around reading Angular workspace documentaion. Basically, when setting the --prod, angular.json, by default, says to optimize all files. Instead of setting "optimization": false, not to lose all optimization benefits, I set only my styles optimization to false, so it won't try to minify my CSS files (which was causing the error) and also, "inlineCritical": false was also important because if "true", it checks for every single mistake in CSS files and it was telling me I was missing a bracket } somewhere in my code (which is HUGE and there's no easy way I can know where it is but debugging HARD).

PS: Apparently this inlineCritical feature is more accurate on Angular 12, because it had never happened to me until Angular 11, and I also found many other people having the same issue with this guy (inlineCritical). So here are my new optimization configurations in angular.json -> configurations -> production -> optimization:

"optimization": {
   "scripts": true,
   "styles": {
      "minify": false,
      "inlineCritical": false
   },
   "fonts": true
 },

I hope it helps someone. If anybody ever finds the why answer for this problem, please let us know, I'm really curious about what is going on here.