Histórico da Página

...

import { Injectable } from '@angular/core';
import { MingleService, Configuration } from '@totvs/mingle';
@Injectable()
export class AppInitService {
 
 constructor(private mingleService: MingleService) { }
 
 mingleConfiguration(): Promise<any> {
   return new Promise((resolve, reject) => {
     console.log("Mingle Service Configuration called");
     const config = new Configuration();
     config.modules.web = true;
     config.environment = 'DEV';
     config.modules.usage_metrics = true;
     config.modules.gateway = true;
     config.modules.push_notification = true;
     config.server = 'https://dev-mingle.totvs.com.br/api'
     config.app_identifier = 'identificadorDoAplicativo'
 
     this.mingleService.setConfiguration(config);
    
     this.mingleService.init();
     .then( init => {
       resolve('Mingle Service Init');
     }).catch(error => {
       console.log("error" , error);
      
       reject(error);
     });  
	console.log("Mingle Service configuration completed");  
   });
 }}

Realize a importação da classe MingleService e a Configuration.

...

const config = new Configuration();

Configurações do módulo:

Em aplicações web utilizeAplicações web: config.modules.web = true; 

Aplicações Em aplicações mobile utilize: config.modules.web = false;

...

Produção = 'https://mingle.totvs.com.br/api'

Como neste exemplo nós ainda estamos desenvolvendo, vamos utilizar o ambiente "Mingle Desenvolvimento": 

config.server = 'https://dev-mingle.totvs.com.br/api'

...

Após finalizar a configuração de acordo com as regras da sua aplicação, chame a função setConfiguration() da classe mingleService passando a sua configuração anterior:

this.mingleService.setConfiguration(config);

...

this.mingleService.init()
  .then( init => {
    resolve('Mingle Service Init');
})

Agora que você criou a classe que configura e inicia o uso da biblioteca Minglerealizou a configuração Mingle e o método init() já está pronto, vamos dizer para o seu aplicativo utilizar a classe AppInitService quando for compilado e iniciado:.

No app.module.ts -> Providers: 

 1- declare  Declare  AppInitService e MingleService

 2- Crie um provide para realizar o APP_INITIALIZER que será responsável por executar as configurações realizadas no passo 2.1anterior

3- Adicione o bloco de código em seu app.module.ts (pode ser logo após os imports ou então se for de sua preferencia pode ser uma função importada de um terceiro arquivo)

export function initializeApp1(appInitService: AppInitService) {
  return (): Promise<any> => { 
    return appInitService.mingleConfiguration();
  }
}

providers: [
  AppInitService,
  MingleService,
  { provide: APP_INITIALIZER, useFactory: initializeApp1, deps:[AppInitService], multi: true},
  {provide: HTTP_INTERCEPTORS, useClass: MingleHttpInterceptor, multi: true}
]

Agora que você já conhece o mingleService e sua configuração inicial já está funcionando, vamos utilizar o Mingle para realizar a autenticação do usuário ao seu servidor.

Pré requisitos: 

• Usuário e senha de autenticação do usuário ao seu servidor
• ALIAS

Considere o arquivo: login.component.ts

Importe a classe MingleService:

import { MingleService } from '@totvs/mingle';

basta compilar a aplicação e acompanhar o terminal de logs.

Caso  no terminal seja apresentada a mensagem:  "Mingle Service configuration completed", sua configuração inicial deu certo. 

Acompanhe os próximos tópicos desta documentação para começar a desenvolver a aplicação utilizando o Mingle, como por exemplo realizar uma autenticação ou uma chamada de API utilizando o gateway do Mingle.Na sua função de login, utilize o método mingleService.auth.login(usuário, senha, alias)

<style>
div.theme-default .ia-splitter #main {
    margin-left: 0px;
}
.ia-fixed-sidebar, .ia-splitter-left {
    display: none;
}
#main {
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: hidden;
}

.aui-header-primary .aui-nav,  .aui-page-panel {
    margin-left: 0px !important;
}
.aui-header-primary .aui-nav {
    margin-left: 0px !important;
}
</style>