How can I configure Autoprefixer in Angular 7

Question

I'm using autoprefix in Angular 7 Project. But When I open the browser devtools and focus the element with class "simple-content", which has display flex as applied style, there is no expected 'prefixes'. In Angular 4-6 projects, this works ok.

Step 1: Run ng serve Step 2: Open the browser devtools and focus the element with class "simple-content", which has display:flex.

In package.json I have

 {
    "browserslist": [
    "last 1 version",
    "> 1%"
    ]
  }. 

In package-lock.json I have 

    "autoprefixer": {
      "version": "9.4.4",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.4.tgz",
      "integrity": "sha512-7tpjBadJyHKf+gOJEmKhZIksWxdZCSrnKbbTJNsw+/zX9+f//DLELRQPWjjjVoDbbWlCuNRkN7RfmZwDVgWMLw==",
      "requires": {
        "browserslist": "^4.3.7",
        "caniuse-lite": "^1.0.30000926",
        "normalize-range": "^0.1.2",
        "num2fraction": "^1.2.2",
        "postcss": "^7.0.7",
        "postcss-value-parser": "^3.3.1"
      },

I tried to enable autoprefixing for flexbox with /* autoprefixer: on */, but no result.

In css file i have

.simple-content {
    display: flex;
}

Expected result :

.simple-content {
  display: -webkit-box;    
  display: -moz-box;      
  display: -ms-flexbox;   
  display: -webkit-flex;   
  display: flex;             
}

Tilsit

I think you are missing the .browserslistrc file. github.com/angular/angular-cli/wiki/stories-autoprefixer – Mccauley

Thank you. This fix the problem. – Tilsit

Answer 1

I tried online autoprefixer tool (https://autoprefixer.github.io/) to test the browserlist you used in package.json and observed that it did not generate prefixed css:

On changing the browser list value to last 2 version, it generated autoprefixed css:

So your package.json seems fine and you can try it by just updating browser list.

Also FYI, angular cli V7.3.5 added src/browserslist which means you need not to add .browserslistrc or browserslist property to the package.json for angular 7 projects. All you need to do is remove not on last line to support IE 9-11.

Severin

"angular cli v7.3.5 added src/browserslist" - I just created a new Angular project with cli version 11.0.7 and there is no browserslist – Bobettebobina

@Bobettebobina it's .browserslistrc in the root – Figurative