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.

Bumkin

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? – Zig

npm run deploy is script? – Serosa

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

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.

Bumkin

how to fix it without doing it false ? – Intranuclear

Answer 2

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.

Presbyopia

Answer 3

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.

Punnet

Answer 4

enter image description here

If you are using VS code , install this extension (W3C Web Validator). And go over the CSS files and check whether you CSS is following the W3C standard or not. It will find out the error. I had the same issue.

Fleece