I am trying to update my Angular 5.2 app to Angular 6. I successfully followed instructions in the Angular update guide (including the update of angular-cli
to v6), and now I am trying to serve the app via
ng serve --env=local
But this gives me error:
Unknown option: '--env'
I use multiple environments (dev/local/prod
), and this is the way it was working in Angular 5.2. How can I set the environment now in Angular 6?
angular-cli
alongside with the whole app, so i thought its obvious :]
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 with
Configuration '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) to manage various envs, in addition to adding new environment file, it is now required to do some changes in angular.json file: add new configuration in the build { ... "build": "configurations": ... property new build configuration may contain only fileReplacements part, (but more options are available) add new configuration in the serve { ... "serve": "configurations": ... property new serve configuration shall contain of browserTarget="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.
Angular no longer supports --env instead you have to use
ng serve -c dev
for development environment and,
ng serve -c prod
for production.
NOTE: -c
or --configuration
-c
(with single dash) or --configuration
(with double dashes).
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.
You can use command ng serve -c dev
for development environment ng serve -c prod
for production environment
while building also same applies. You can use ng build -c dev
for dev build
Use this command for Angular 6 to build
ng build --prod --configuration=dev
This works on Angular 12
step 1:
"serve":
"configurations": {
"staging": {
"browserTarget": "projectName:build:staging"
}
Step 2: npx ng run myapp:serve --configuration=staging
Success story sharing
baseHref
optionVSCode
. InAngular 6
of course. So that theng serve
command includes the remote debugger port when launching theChrome
browser.