Cannot run my angular application in dev environment - node.js

Question

So I have an Angular application that I can build and run in production environment, but cannot run in dev mode.
Tried to use this command:
npm exec ng serve -c dev --port 4200 --proxy-config proxy.conf.json
and adding -c dev shows this error in the console
An unhandled exception occurred: Configuration 'dev' is not set in the workspace.
I have a environment folder with environment.prod.ts file and enviromnent.ts file
That contains :
//environment.ts
export const environment ={production: true};
//environment.prod.ts
export const environment = {development: true};
For the instance, there's a look of my angular.json file :
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
"packageManager": "pnpm",
"analytics": "f9472df0-6689-4f76-b320-65b56b37836a"
},
"newProjectRoot": "projects",
"projects": {
"hellooara-web-ui": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"inlineStyle": true,
"style": "css"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "target/classes/static",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"preserveSymlinks": true,
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
{
"glob": "*",
"input": "node_modules/mch-common/assets/images",
"output": "assets/mch-common/images"
},
{
"glob": "*.json",
"input": "node_modules/mch-common/assets/i18n",
"output": "assets/mch-common/i18n"
},
"src/assets"
],
"styles": [
"src/styles.scss"
],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "100kb"
}
]
}
},
"defaultConfiguration": "development"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "hellooara-web-ui:build"
},
"configurations": {
"production": {
"browserTarget": "hellooara-web-ui:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "hellooara-web-ui: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/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "#angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "hellooara-web-ui:serve"
},
"configurations": {
"production": {
"devServerTarget": "hellooara-web-ui:serve:production"
}
}
}
}
}
}
}
I already tried to add an environment.dev file in environment folder, add environment into angular.json file.

Answer 1

Your error is correct.
Examine the following part of your angular.json:
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "hellooara-web-ui:build"
},
"configurations": {
"production": {
"browserTarget": "hellooara-web-ui:build:production"
}
}
},
When you run ng serve -c dev what the angular cli does is use the "#angular-devkit/build-angular:dev-server" script and it looks for the configuration "dev" to override the default options (in "serve" > "options"). But you don't have a "dev" configuration, only a "production" one.
You can therefore run
ng serve (this is development by default)
ng serve -c production
Advanced: once you get comfortable you can add new configurations as you like (testing/staging/etc) with custom options. The available options are usually defined in a schema co-located where the "#angular-devkit/build-angular:dev-server" script is in node_modules.
Update per comment
The common form for environments is to do the following, referring in your application to environment.ts. You then set fileReplacements to replace environment.ts with environment.prod.ts. See https://angular.io/guide/build#configure-target-specific-file-replacements
//environment.ts
export const environment = { production: false };
//environment.prod.ts
export const environment = { production: true };

Answer 2

There is something called "serve" property in angular.json
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"devServer": {
"browserTarget": "myApp:build:devServer"
},
}
once did that try running
ng serve -c devServer
UPDATE 1:
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "hellooara-web-ui:build"
},
"configurations": {
"production": {
"browserTarget": "hellooara-web-ui:build:production"
},
"development": {
"browserTarget": "hellooara-web-ui:build:development"
}
}
},