Angular 5: Rename/obfuscate CSS selectors

Question

Is there any way to rename/obfuscate CSS selectors in an Angular CLI project? If you look at the HTML of sites like Google or Facebook, you will see randomized CSS names.

I assume this is for many reasons, including and not limited to preventing people from scripting your website by targeting static class names.

I want to do something similar in my app, however I don't see any trivial way to do so. This article shows how to do it with one line using webpack, however Angular CLI doesn't allow any webpack configuration as far as I know.

Is there any solution to this without having to write a custom script, or will I just need to write some kind of custom script? I have no problem doing that, just want to make sure I'm not reinventing the wheel first.

filipbarak · Accepted Answer · 2018-02-22 14:43:27Z

2

Angular CLI does in fact allow Webpack configuration.

To eject webpack write:

$ ng eject

What this will do is generate a webpack.config.js file for you, which you can edit and customize however you want (add your css rules in it etc...)

But you will not be able to start your project using ng serve, you will have to run npm run build & npm run start for it to work!

Edit: If you want to undo ng eject you will have to edit your .angular.cli.json file and set ejected to false:

"project": { 
  ...
  "ejected": false
}

Here's some more info: https://github.com/angular/angular-cli/issues/6302

edited Feb 22, 2018 at 14:43

answered Feb 22, 2018 at 14:38

filipbarak

1,9252 gold badges19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Lansana Camara Over a year ago

Is ng eject reversible? Is it recommended against? Are there any adverse side effects, or is the only different that you have to use npm commands instead of ng? Got any links for documentation on this? Thanks!

filipbarak Over a year ago

Edited the answer for you.

poke Over a year ago

See also: ng eject

Lansana Camara Over a year ago

eject seems like a poor solution to a common problem, hopefully they will make this better in the future. I just want to configure the build, don't want to have to break future upgrades and support for CLI commands. Nonetheless, it answers my question so thanks.

VKS Over a year ago

ng eject is no longer supported by Angular

Jan Peer · Accepted Answer · 2020-03-19 09:30:35Z

0

You could parse your code after the build with rename-css-selectors

answered Mar 19, 2020 at 9:30

Jan Peer

3053 silver badges8 bronze badges

Collectives™ on Stack Overflow

Angular 5: Rename/obfuscate CSS selectors

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related