How to check feature is true on different environments in angular?

Question

I am using different environments in angular, stored into the environments folder, like:

environment.ts
environment.dev.ts
environment.prod.ts

In the environment.ts file, I have:

export const environment = {
  production: false,
  environment: 'Development',
  advanced: {
    features: true
  }
};

I want to show a div element in page only if the environment has this advanced feature equal to true. I was thinking of doing :

import { environment } from './environments/environment';
export class AdvancedComponent implements OnInit {
  advancedFeatures:boolean;
  
  constructor() { }

  ngOnInit() {
    this.advancedFeatures= environment.advanced.features;

    if (this.advancedFeatures){
      console.log("true");
    }
    else {
      console.log('false');
    }
  }

}

Is this enough for hiding or showing a div element if the environment is dev or prod? Is this a good approach of the advanced feature from environment or should I somehow import all environments into this class?

Aldin Bradaric · Accepted Answer · 2021-03-24 16:13:58Z

1

Your environment.ts is the default config that's used when you import the environment file.

And the reason Angular is able to pick the right environment file during build is by utilizing a fileReplacements section in its config settings (see ng docs). That way it ensures that you use the correct environment.advanced.features value in your code.

Similar to the prod version in fileReplacements, you could define any kind of setting (ie. dev or testing) and refer to the corresponding environment file.

As for the viability of your approach-- personally I prefer using access roles to define which pages a user can see but I don't see any particular disadvantages of your approach either.

answered Mar 24, 2021 at 16:13

Aldin Bradaric

8115 silver badges11 bronze badges

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

1 Comment

Adir Dayan Over a year ago

Thanks Aldin. Bottom line, in code always import this file - environment.ts, angular will replace the content to environment.prod.ts during build if the fileReplacements is defined (for me it was defined automatically after project creation)

Collectives™ on Stack Overflow

How to check feature is true on different environments in angular?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related