12

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:

enter image description here

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.

3
  • 1
    there's not even remotely enough info even to try to guess what the problem might be, can you at least post that deploy script command?
    – D Pro
    Jun 19, 2021 at 20:42
  • npm run deploy is script?
    – Hamada
    Jun 19, 2021 at 20:51
  • I have the same issue, on windows everything build fine, but on unix I get the same exception. Error shows up after migration from 11 to 12.
    – Meeresgott
    Jul 12, 2021 at 21:22

3 Answers 3

10

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.

1
  • how to fix it without doing it false ? Oct 22, 2021 at 6:45
3

React/CSS Issue: static/css/main.css from Css Minimizer plugin Error: Unexpected '/'. escaping special characters with \ may help.

How to fix it? 1.) Just go to your all css files 2.) next / or * find it in your css files 3.) remove / * already is commended in css file just remove that line entire css files.

example : "/vijayeswaran/" (remove this type cmds)

next you check it everything is fine

0
2

yeah, I resolved it by commenting out all the css styling and then I was gradually uncommenting it till I found the mistake. I had extra “*/“ in one of the css files. I guess I accidentally left it when commenting/ uncommenting code. So yeah, this is what helped me to resolve the bug.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.