Angular CLI Passing Environment Variable in command

Question

Is there any way to pass some parameters when using angular cli command like ng build or especially in my case ng serve to change or set variables in environment without changing environment file or define new environment each time?

For example I have this environment.ts file

    export const environment = {
     apiData: true,
     authentication: true,
     checkValidation: true,
     signData: false,
     mockFileDirectoryUrl: '/assets/',
     saveUrl: 'http://localhost:5000/'
     getUrl: 'http://localhost:5005/'
    };

And I want to run my app in local for test with signData=true flag and different SaveUrl with a command like:ng serve signData true saveUrl "https:/localhost:5050"

I have found this approach How to pass environment variables at building time in an Angular application using .env files but the problem is with this solution each time the environment file is completely rewrote but I want pass these variables just in runtime.

You can create separate environment files for normal serve and for prod mode environment.ts and environment.prod.ts respectively, this will be an easier method if you have many variables to pass. — BINFAS K
– BINFAS K, Commented Jul 22, 2020 at 8:23
@BINFASK I have separate environment for production but on local I have many flags on my environment which I want to change some of them under some circumstances otherwise I should change the environment each time. — Hamed Mahdizadeh
– Hamed Mahdizadeh, Commented Jul 22, 2020 at 8:26
@huanfeng Thank you but I have linked to this approach in my question and I have explain why this can't help me — Hamed Mahdizadeh
– Hamed Mahdizadeh, Commented Jul 22, 2020 at 8:38

Klaster_1 Нет войне · Accepted Answer · 2021-09-16 06:23:25Z

5

Check out @ngx-env/builder, it exposes environment variables like these:

NG_APP_ENABLE_ANALYTICS=false
NG_APP_VERSION=$npm_package_version
NG_APP_COMMIT=$GITHUB_SHA

as global variables:

@Component({
  selector: "app-footer",
})
export class FooterComponent {
  version = process.env.NG_APP_VERSION;
  branch = process.env.NG_APP_BRANCH_NAME;
  commit = process.env.NG_APP_COMMIT;
  analyticsFlag = process.env.NG_APP_ENABLE_ANALYTICS;
}

and via a pipe:

<!-- Same output in the spans -->
<span> {{ 'process.env.NG_APP_BRANCH_NAME' | env }} </span>
<span> {{ 'NG_APP_BRANCH_NAME' | env }} </span>
<span> {{ branch }} </span>

Examples courtesy of the project readme.

answered Sep 16, 2021 at 6:23

Klaster_1 Нет войне

12.2k9 gold badges65 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular CLI Passing Environment Variable in command

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related