Angular - Configuration is not set in the workspace

I try to serve my Angular app with my specific configuration but Angular does not recognize it :

$ ng serve --configuration=fr
An unhandled exception occurred: Configuration 'fr' is not set in the workspace.
See "/tmp/ng-nyZPjp/angular-errors.log" for further details.

My angular.json :

"configurations": {
  "fr": {
    "aot": true,
    "outputPath": "dist/fr/",
    "i18nFile": "src/i18n/messages.fr.xlf",
    "i18nFormat": "xlf",
    "i18nLocale": "fr",
    "i18nMissingTranslation": "error",
    "baseHref": "/fr/"
  },
  "en": { 
    "aot": true,
    "outputPath": "dist/en/",
    "i18nFile": "src/i18n/messages.en.xlf",
    "i18nFormat": "xlf",
    "i18nLocale": "en",
    "i18nMissingTranslation": "error",
    "baseHref": "/en/"
  },
    ...

ng serve --configuration=en works perfectly

The error you are getting is because you didn't add it to your serve browserTarget configuration:

"serve":{
   "fr": {
            "browserTarget": "custom-reports:build:fr"
         },
 }

In Angular 11 you need to place the browserTarget property inside configurations (which is under serve in angular.json file):

"serve": {
    "configurations": {
        "fr": {
            "browserTarget": "custom-reports:build:fr"
        },
    },
},

I also faced the same issue,

An unhandled exception occurred: Configuration 'fr' is not set in the workspace.
See "/tmp/ng-nyZPjp/angular-errors.log" for further details.

even though I had the configurations setup in serve and build.

My angular.json file was like,

"configurations": {
  "fr": {
    "aot": true,
    "outputPath": "dist/fr/",
    "i18nFile": "src/i18n/messages.fr.xlf",
    "i18nFormat": "xlf",
    "i18nLocale": "fr",
    "i18nMissingTranslation": "error",
    "baseHref": "/fr/"
  },
  "en": { 
    "aot": true,
    "outputPath": "dist/en/",
    "i18nFile": "src/i18n/messages.en.xlf",
    "i18nFormat": "xlf",
    "i18nLocale": "en",
    "i18nMissingTranslation": "error",
    "baseHref": "/en/"
  },
  .
  .
  .
  .
  .
  .
  .
  .
  "serve": {
    "configurations": {
        "en": {
            "browserTarget": "custom-reports:build:en"
        },
        "fr": {
            "browserTarget": "custom-reports:build:fr"
        }
    },
},

and I still got issue.

I solved it by changing the order of the configuration and it was solved.

my angular.json after change

"configurations": {
  "en": { 
    "aot": true,
    "outputPath": "dist/en/",
    "i18nFile": "src/i18n/messages.en.xlf",
    "i18nFormat": "xlf",
    "i18nLocale": "en",
    "i18nMissingTranslation": "error",
    "baseHref": "/en/"
  },
  "fr": {
    "aot": true,
    "outputPath": "dist/fr/",
    "i18nFile": "src/i18n/messages.fr.xlf",
    "i18nFormat": "xlf",
    "i18nLocale": "fr",
    "i18nMissingTranslation": "error",
    "baseHref": "/fr/"
  },
  .
  .
  .
  .
  .
  .
  .
  .
  "serve": {
    "configurations": {
        "en": {
            "browserTarget": "custom-reports:build:en"
        },
        "fr": {
            "browserTarget": "custom-reports:build:fr"
        }
    },
},

and this worked for me.

I had the same error in the Angular with Angular Universal V 12.x and following codes in the Angular.json file fix my error(replace serve-ssr section with the following codes):

"serve-ssr": {
    "builder": "@nguniversal/builders:ssr-dev-server",
    "options": {
            "browserTarget": "yourAppName:build",
            "serverTarget": "yourAppName:server"
     },
     "configurations": {
            "production": {
                 "browserTarget": "yourAppName:build:production",
                 "serverTarget": "yourAppName:server:production"
            }
     }
}

Github