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

user_14237481 0
Viewed 6833

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.

postcss angular
3 Answers

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.

user_142374810

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

user_194924590

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.

user_195931470
Related