When you use the ng serve command to build an application and serve it locally, the server automatically rebuilds the application and reloads the page when you change any of the source files. When you run ng new my-first-project a new folder, named my-first-project , will be created in the current working directory.
Command-Line Options ng serve has built-in option flags to update host and port: --port : port to listen on; defaults to 4200. --host : host to listen on; defaults to localhost.
You need to use the new configuration
option (this works for ng build
and ng serve
as well)
ng serve --configuration=local
or
ng serve -c local
If you look at your angular.json
file, you'll see that you have finer control over settings for each configuration (aot, optimizer, environment files,...)
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
You can get more info here for managing environment specific configurations.
As pointed in the other response below, if you need to add a new 'environment', you need to add a new configuration to the build task and, depending on your needs, to the serve and test tasks as well.
Adding a new environment
Edit:
To make it clear, file replacements must be specified in the build
section. So if you want to use ng serve
with a specific environment
file (say dev2), you first need to modify the build
section to add a new dev2 configuration
"build": {
"configurations": {
"dev2": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev2.ts"
}
/* You can add all other options here, such as aot, optimization, ... */
],
"serviceWorker": true
},
Then modify your serve
section to add a new configuration as well, pointing to the dev2 build
configuration you just declared
"serve":
"configurations": {
"dev2": {
"browserTarget": "projectName:build:dev2"
}
Then you can use ng serve -c dev2
, which will use the dev2 config file
This answer seems good.
however, it lead me towards an error as it resulted withConfiguration 'xyz' could not be found in project ...
error in build.
It is requierd not only to updated build configurations, but also serve
ones.
So just to leave no confusions:
--env
is not supported in angular 6
--env
got changed into --configuration
|| -c
(and is now more powerful)angular.json
file:
{ ... "build": "configurations": ...
propertyfileReplacements
part, (but more options are available){ ... "serve": "configurations": ...
propertybrowserTarget="your-project-name:build:staging"
You can try: ng serve --configuration=dev/prod
To build use: ng build --prod --configuration=dev
Hope you are using a different kind of environment.
For Angular 2 - 5 refer the article Multiple Environment in angular
For Angular 6 use ng serve --configuration=dev
Note: Refer the same article for angular 6 as well. But wherever you find
--env
instead use--configuration
. That's works well for angular 6.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With