66

I am facing an issue while upgrading my project from angular 8.2.1 to angular 13 version.

After a successful upgrade while preparing a build it is giving me the following error.

Data path "" must NOT have additional properties(extractCss).

I already renamed styleext with style in the angular.json file, but still not able to find the root cause for this error.

angular.json file is as follows.

  {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "qiwkCollaborator": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {

        /*  "configurations": {
            "fr": {
            "aot": true,
            "outputPath": "dist/qwikCollaborator/fr/",
            "i18nFile": "src/translate/messages.fr.xlf",      
            "i18nFormat": "xlf",      
            "i18nLocale": "fr",      
            "i18nMissingTranslation": "error"    
             },
             "en": {
            "aot": true,
            "outputPath": "dist/qwikCollaborator/en/",
            "i18nFile": "src/translate/messages.en.xlf",      
            "i18nFormat": "xlf",      
            "i18nLocale": "en",      
            "i18nMissingTranslation": "error"    
             }  
           },*/
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/qiwkCollaborator",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "src/assets/css/custom-mobile.css",
              "src/assets/css/custom.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "src/assets/js/qwikCollaborator.js"
            ]
          },
          "configurations": {
          "es5": {
        "tsConfig": "./tsconfig.es5.json"
      },
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
         /*  "configurations": {
            "fr": {
            "browserTarget": "qwikCollaborator:build:fr" 
            },
            "en": {
            "browserTarget": "qwikCollaborator:build:en" 
            } ,
            },*/
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "qiwkCollaborator:build"
          },
         
          "configurations": {
          "es5": {
        "browserTarget": "qiwkCollaborator:build:es5"
      },
            "production": {
              "browserTarget": "qiwkCollaborator:build:es5"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "qiwkCollaborator:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": ["../node_modules/jspdf/dist/jspdf.min.js"]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "qiwkCollaborator:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "qiwkCollaborator:serve:production"
            }
          }
        }
      }
    }},
  "defaultProject": "qiwkCollaborator"
}

How to get rid of this additional property?

can anyone help me with this?

thanks in advance!

4
  • Could you post your angular.json Commented Dec 14, 2021 at 5:41
  • @MehyarSawas added, please check. Commented Dec 14, 2021 at 7:00
  • Does this answer your question? Angular 12 Data path "" must NOT have additional properties (styleext) Commented Dec 31, 2021 at 16:29
  • @Bellash I have the same issue except that i am using angular 13 and none of the solutions prescribe online so far has worked for me Commented Feb 6, 2022 at 18:00

1 Answer 1

148

Just remove the "extractCss": true from your production environment, it will resolve the problem.

The reason about it is extractCss is deprecated, and it's value is true by default. See more here: Extracting CSS into JS with Angular 11 (deprecated extractCss)

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

3 Comments

Have the same issue but mine has to do with "styleext". will the same solution apply?
I had the same issue with "sourceMap" and the same solution applied.
when i remove extractCss from my angular.json, some scss adjustments from my project got broke

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.