switch development mode and product mode by environments in Angular 5

Question

My angular-cli.json has environments array.

"environmentsSource": "environments/environment.ts"
"environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"

In environment.ts,

export const environment = {
      production: false
};

In environment.prod.ts

export const environment = {
      production: true
};

And in main.ts,

if (environment.production) {
    enableProdMode();
}

However I only have one package.josn file.

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build"

I have different environments such as dev/qa and prod. The urls are different, how can I switch the mode for just one package.json file?

The build and deploy process is automatedly. We can't change the setting when build.

Marco · Answer 1 · 2020-10-01T13:05:56.870

0

You need to reference the configuration in the CLI.

Example to run the prod environment.

ng serve --configuration=prod

This will replace the environment.ts file by environment.prod.ts.

You can set all the needed variable (url, ...) in the environments files.

In the code, you only need to read the environment file. It will be replaced by the angular CLI configuration param. You can parameter this in angular.json file.

"configurations": {
    "prod": {
        "fileReplacements": [
            {
                "replace": "apps/afh/src/environments/environment.ts",
                "with": "apps/afh/src/environments/environment.prod.ts"
            }
        ],
        ...
    }
}

edited Oct 01 '20 at 13:05

answered Oct 01 '20 at 12:58

Marco

1,073
9
22

I check in the code and deploy it into server. The machine does not know the environment. Only the user can see the difference from the url. Your code is always setting the prod mode even in dev url. – Hello Oct 01 '20 at 13:01
@Hello I don't understand clearly your problem. If you don't add the --configuration parameter, it will be dev environment. – Marco Oct 01 '20 at 13:08
I updated the question, the build/deploy server will read the configuration. It is either dev or prod. I mean I just check in one file into source server, I can't set one parameter for dev and set another parameter for prod. They are using the same parameter because of the same source file(package.json). It is automated build process. – Hello Oct 01 '20 at 13:13
In your example, `ng serve --configuration=prod`. It is always prod mode even in dev. I can't set the configuration for dev with another parameter. The package.json file must be same in any envoirments. – Hello Oct 01 '20 at 13:20
@Hello You can have one `package.json` if you set : `"start": "ng serve", "start:prod": "ng serve --prod"`. You can't the line code to run the project ? – Marco Oct 01 '20 at 13:22
How do you distinguish them? Say for dev url is `http://mysitedev.com/` and prod url is `http://mysiteprod.com`, and in localhost it is just `localhist:5000`. How do you know their mapping? – Hello Oct 01 '20 at 13:30

score 0 · Accepted Answer · answered Oct 06 '20 at 14:06

0

In main.ts, I checked the value of document.location.host. If it contains a specific substring then I

enableProdMode()

answered Oct 06 '20 at 14:06

Hello

796
8
30

switch development mode and product mode by environments in Angular 5

2 Answers2