Implementar a alternância de funcionalidades no seu app Angular (Guia Definitivo de 2021)

O guia definitivo para implementar a função flag em sua aplicação Angular

Vamos desbravar três métodos diferentes que você pode estar utilizando para inserir a alternância de recursos (feature toggle) em uma aplicação Angular.

Vamos começar

Como você insere uma flag em sua aplicação Angular? Nesse guia vamos ver 3 métodos diferentes e examinar seus prós e contras.

Você está preparado? Vamos lá. 👉🏻

1. O jeito mais fácil de inserir uma feature toggle em sua aplicação Angular

Esse é o caminho mais simples.

Tão simples como o abecedário.

Facílimo. É assim que funciona.

Você pode usar os arquivos do Angular para inserir algumas capacidades da flag em sua app Angular.

Os que já possuem alguma experiência dizem que essa não é uma maneira escalável de criar flags para sua app Angular. Ainda que eles não estejam errados, ainda assim é uma ótimo lugar para começar sua app com um serviço de inicialização. Tenha em mente que tudo vai depender da situação. Se você tem apenas uma ou duas flags que gostaria de ligar e desligar, então essa é sim uma ótima opção para você. Faz escala? Infelizmente, não.

Podemos fazer assim: Abra o src/app/environments/environment.ts e insira o nome de uma flag com o valor de true ou false.

Esse aqui é um exemplo básico:

export const environment = {
  production: false,
  feature: false
};

Depois vamos gerar nosso componente.

ng generate component feature

Após isso vamos importar as configurações para o nosso arquivo app.component.ts e definir uma variável local para receber a flag. Desse jeito:

import { Component } from '@angular/core';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FeatureToggling';
  feature = environment.feature;
}

Por fim, no arquivo app.component.htm usamos o ngIf para indicar se o componente vai aparecer ou não.

<div>
  Angular Feature Flags Application
</div>
<app-feature *ngIf="feature"></app-feature>

São apenas esses passos básicos.

Insira uma boolean flag em seu arquivo.
Importe ela para sua aplicação sempre que quiser e use para ligar ou desligar.

Mesmo que esse método seja bem simples, ele deixa muitas brechas porque toda vez que você quiser alternar um recurso, você vai precisar mudar o arquivo environment.ts e implementar novamente. Para algumas situações específicas esse método não apresenta nenhuma grande dificuldade. Mas se você quiser deixar de um jeito automático para ativar ou desativar o recurso, então vamos examinar uma opção melhor.

2. Como inserir uma alternância de recursos em sua aplicação Angular sem precisar fazer uma chamada HTTP

Como podemos evitar de fazer a chamada HTTP para verificar a alternância de recursos antes de iniciar o restante da app?

Podemos inserir um arquivo feature-flags.json em nossa pasta src/app/assets/. Esse arquivo pode ser modificado a qualquer hora em um servidor ao vivo.

Como usamos?

Primeiro vamos configurar o Typescript para resolver os módulos JSON (arquivos). Isso vai nos permitir importar as configurações JSON em qualquer arquivo *.ts.

Abra o tsconfig.json e defina o resolveJsonModule de igual para true. Desse jeito:

{
  "compileOnSave": false,
  "compilerOptions": {
    "resolveJsonModule": true,
      ...
  }
}

Depois vamos criar um arquivo na pasta assets chamado feature-flags.json. Vamos editar para ser algo parecido com isso:

{
    "feature": true
}

Próximo passo é editar o app.component.ts para importar as flags em nosso arquivo JSON.

import { Component } from '@angular/core';
import * as FeatureFlags from '../assets/feature-flags.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FeatureToggling';
  feature = FeatureFlags.feature;
}

E enfim em nosso arquivo app.component.html nós usamos o nglf para esconder ou mostrar o componente que são baseados nas configurações do nosso arquivo feature-flags.json.

<div>
  Angular Feature Flags Application
</div>
<app-feature *ngIf="feature"></app-feature>

3. Como configurar uma alternância de recursos automática? 🤷

Os dois métodos acimas podem não ser avançados o suficiente para o seu projeto. Então como usamos a automatização da alternância de recursos? Por aqui nós podemos deixar a feature toggle automática. Por exemplo, fazer uma aplicação Angular ligar uma API antes mesmo de renderizar a app.

Vamos começar criando um serviço de flag para administrar a lógica do carregamento da configuração feature toggle.

ng generate service feature-flags

Depois vamos inserir duas funções no serviço. Uma para carregar as flags de um servidor remoto, e a segunda para pegar a flag de uma configuração carregada. Nosso arquivo de serviço vai se parecer com isto.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class FeatureFlagsService {

  featureFlags: JSON;

  constructor(public httpClient: HttpClient) { }

  loadFeatureFlags(): Promise<any> {
    return this.httpClient.get("https://gist.githubusercontent.com/dkreider/dbef4a890bdc143b86d0b9330dbf2381/raw/22c03d8ed2d964a4c72fc1d35ea27dcb2adc9fd8/feature-flags.json")
      .pipe(tap((response) => this.featureFlags = response as any))
      .toPromise();
  }

  getFeatureFlag(key: string): boolean {
    return this.featureFlags[key];
  }
}

O próximo passo é configurar nossa aplicação Angular para usar esse serviço quando for iniciado. Em seu arquivo app.module.ts informe um novo provedor na seção de provedores e use o APP_INITIALIZER para ter certeza que sua função loadFeatureFlags() vai ser acionada quando iniciar.

providers: [
    FeatureFlagsService,
    {
      provide: APP_INITIALIZER,
      useFactory: (featureFlagsService: FeatureFlagsService) => () => featureFlagsService.loadFeatureFlags(),
      deps: [FeatureFlagsService],
      multi: true
    }
]

Em nosso arquivo app.component.ts vamos colcoar o FeatureFlagsService e executar a configuração da flag.

import { Component } from '@angular/core';
import { FeatureFlagsService } from './feature-flags.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FeatureToggling';
  feature: boolean;

  constructor(public featureFlagService: FeatureFlagsService) {
    this.feature = featureFlagService.getFeatureFlag("feature");
  }

}

Conclusão

Aí está. Três métodos diferentes para impementar a função flag em sua aplicação Angular.

Dúvidas ou comentários? Não deixe de entrar em contato comigo. 🧑🏼‍💻