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.
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.