CODEWITHSUNDEEP
cssangular
wpfwannabe
wpfwannabe

Reputation: 14877

Angular --prod issue with border-top-left-radius and border-bottom-left-radius

I have an issue with border-top-left-radius and border-bottom-left-radius on a button which seem to work in development build but not in production. When I run ng serve I get the expected result:

Development

If I just run the same project with ng serve --prod I get this:

Production

...with some errors in Developer Tools:

enter image description here

Apparently, the build system didn't do a good job. Something didn't work as the styles weren't deployed correctly. This is easily reproducible with both Angular 6 and 7.

  1. Create a blank app using ng new test-app

  2. Add a button in app.component.html

    <button class="btn btn-primary rounded-circle">TEST</button>

  3. Add CSS to app.component.css

    .rounded-circle { border-radius: 50px !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

  4. I also used Bootstrap but it is no necessary to reproduce this.

Is there something obvious that I am missing?

Upvotes: 0

Views: 624

Answers (2)

Outman
Outman

Reputation: 3330

It's overriden by the class underneath it that's generated in prod mode. this

Unchecking it in the dev console like I did in the image results in the correct style, but to actually achieve so try replacing your CSS class with this:

.rounded-circle { border-radius: 0px 50px 50px 0px !important }

Upvotes: 2

Aakash Jain
Aakash Jain

Reputation: 21

Try to use this command ng serve --prod --build-optimizer=false. It might fix your issue.

Upvotes: 0

Related Questions