sábado, 1 de dezembro de 2018

Resumo sobre COBIT

Para estudar para provas e concursos. Sempre cai algo sobre Governança de TI, COBIT, ITIL, PMBOK, Scrum e XP, então resolvi fazer resumos rápidos sobre cada um destes assuntos, e o blog é um lugar de manter acesso fácil e rápido :) .

COBIT => Control Objectives for Information and Related Technology/Objetivos de Controle para a Informação e Tecnologia.

É um guia de gerenciamento de TI que indica e descreve boas práticas voltadas à gestão de TI. De forma breve, o conteúdo do COBIT® aborda o gerenciamento do negócio por meio de controles para a área de TI.

É um manual composto de princípios, regras e indicadores de controle que compõem um modelo de gestão de TI.

É uma metodologia que estabelece um modelo de controle para Governança de TI.

Evolução

Auditoria => Controle de resultados e objetivos => Gestão (Abrange ITIL e PMBOK) => Governança de TI (Avaliar, Dirigir e Acompanhar) => Governança corporativa de TI
Cada um corresponde a uma versão do COBIT (1,2,3,4 e 5)

As práticas do COBIT® são fortemente focadas mais nos controles e menos na execução: otimizar os investimentos em TI, assegurar a entrega dos serviços e prover métricas para julgar quando as coisas saem erradas.

É possível que o COBIT® NÃO ajude diretamente no cotidiano do profissional de TI. No entanto, certamente, o COBIT® contribui para que a empresa alcance o alinhamento estratégico da TI, independentemente de seu setor de atuação.

O principal objetivo do COBIT® é ser orientado ao negócio, ou seja, voltado para fazer com que a área de TI trabalhe de forma a possibilitar que os produtos/serviços da empresa sejam realizados de forma eficiente.

O COBIT® oferece diretrizes de fácil compreensão para que esses executivos possam tomar decisões sobre a TI.

O COBIT® oferece um conjunto de processos bem estruturados de TI que permite à empresa disponibilizar serviços que garantam a PRODUÇÃO DE INFORMAÇÕES VITAIS para a tomada de decisão e, consequentemente, para a definição dos requisitos de negócio (efetividade, eficiência,confidencialidade, integridade, disponibilidade, conformidade, confiabilidade).

A INFORMAÇÃO é foco do papel fundamental do COBIT®, porque seu perfeito gerenciamento é a parte central de qualquer sistema de Governança em TI, sendo fundamental, também, para alinhar os processos de TI à estratégia da empresa. É por meio do bom gerenciamento da informação que a tomada de decisões e a definição de requisitos de negócios obtêm sucesso.

O COBIT® divide a atuação da TI em quatro domínios, 34 áreas de processos e 210 atividades, com o objetivo de promover a melhoria contínua das organizações. Mas de que forma ocorre essa melhoria contínua?
Os quatro domínios do COBIT® estão relacionados às quatro etapas do ciclo PDCA:
Planejar e Organizar (PO) ➞ Plan
Adquirir e Implementar (AI) ➞ Do
Entregar e Suportar (DS) ➞ Check
Monitorar e Avaliar (ME) ➞ Act

As 34 áreas de processos estão divididas entre os quatro domínios. Esses domínios, direta ou indiretamente, obedecem à mesma filosofia de melhora contínua do ciclo PDCA. Isso significa dizer que a TI deve buscar a melhora contínua de cada um dos 210 processos.

Como os domínios se dividem em processos no COBIT®?

Planejar e Organizar:
PO1: Definir um plano estratégico de TI
PO2: Definir a arquitetura da informação
PO3: Determinar o direcionamento tecnológico
PO4: Definir os processos, a organização e os relacionamentos da TI
PO5: Gerenciar o investimento de TI
PO6: Comunicar as diretrizes e expectativas da diretoria
PO7: Gerenciar os recursos humanos de TI
PO8: Gerenciar a qualidade
PO9: Avaliar e gerenciar os riscos de TI
PO10: Gerenciar projetos

Adquirir e Implementar
AI1: Identificar soluções automatizadas
AI2: Adquirir e manter software aplicativo
AI3: Adquirir e manter infraestrutura de tecnologia
AI4: Habilitar operação e uso
AI5: Adquirir recursos de TI
AI6: Gerenciar mudanças
AI7: Instalar e homologar soluções e mudanças

Entregar e Suportar
DS1: Definir e gerenciar níveis de serviço
DS2: Gerenciar serviços de terceiros
DS3: Gerenciar capacidade e desempenho
DS4: Assegurar continuidade de serviços
DS5: Assegurar a segurança dos serviços
DS6: Identificar e alocar custos
DS7: Educar e treinar os usuários
DS8: Gerenciar a central de serviço e os incidentes
DS9: Gerenciar a configuração
DS10: Gerenciar os problemas
DS11: Gerenciar os dados
DS12: Gerenciar ambiente físico
DS13: Gerenciar as operações

Monitorar e Avaliar
ME1: Monitorar e avaliar o desempenho
ME2: Monitorar e avaliar os controles internos
ME3: Assegurar a conformidade com requisitos externos
ME4: Prover a governança em TI

Recursos de TI: Aplicativos, Informação, Infraestrutura e Pessoas.

Compreendemos como infraestrutura tecnológica todos hardwares, todos equipamentos de redes, todas mídias e todos softwares, todos sistemas operacionais e de gerenciamento de banco de dados, além do próprio ambiente que suporta essa infraestrutura.

O COBIT® e a Governança de TI

Um dos conceitos chaves do COBIT é o das 5 áreas de foco de Governança: Alinhamento Estratégico, Entrega de Valor, Gestão de Recursos, Gestão de Riscos e Mensuração de Desempenho.

O COBIT® assumiu do COSO os três princípios da Governança, que são: responsabilidade, prestação de contas e transparência.

Surge uma preocupação importante em todas as áreas de processo: a de determinar os papéis e as responsabilidades dos envolvidos, ou seja, o que cada membro da equipe deve fazer para que os serviços da TI sejam realizados com eficiência e da melhor forma possível.

A Matriz RACI é uma ferramenta simples de gestão e serve para gerir atividades estabelecidas:
R = Responsável = Quem faz
A = Aprovador = Chefe imediato
C = Consultor = Quem tem conhecimento para ajudar
I = Informado = Autoridade a ser informada (grupo de pessoas a ficar por dentro das atividades)



Conteúdo baseado no curso gratuíto da Escola virtual do Bradesco: https://www.ev.org.br/

Resumo sobre Angular 4

Como estamos sempre lidando com muitas tecnologias diferentes, cada uma delas cheia de particularidades, as vezes faço um resumo para não perder muito tempo procurando o básico. Esse é meu resumo pessoal sobre o Angular 4.

NPM

- npm install nome_da_biblioteca --save
- npm uninstall nome_da_biblioteca --save

Angular-Cli

- ng new nome_do_projeto => cria um projeto,  inclusive a pasta raiz.
- ng init => quando já existir a pasta raiz e quiser criar a estrutura do projeto (deve ser executado no diretório).
- ng serve => executa o projeto.
- ng g c nome-do-componente => cria o componente.
- ng g d nome-da-diretiva => cria uma diretiva.
- ng g s nome-do-servico => cria o serviço.
- ng g m nome-do-model => cria o módulo.
- ng g p nome-do-pipe => cria o pipe.
- ng lint => lista erros de javascript e anti-padrões do style guide do Angular

Componentes

- interpolação => {{variavel}}
- propert-binding => [propriedade]="variavel" => <input [value]="nome" />
- event-binding => (evento)="método" => (click)="salvar($event.target.value)"
- two-way-data-binding => [(ngModel)]="nome"
- comunicação do componente pai para o filho:

@Input() variavel: tipo;

- comunicação do componente filho para o pai:

@Output variavel_evento = new EventEmitter();

//em algum momento usa-se:
this.variavel_evento.emit(objeto_ou_valor);

Variável de referência

usa-se o '#' antes de um nome => #imputName => <input type="text" class="form-control" #imputName />
-então essa variável fica disponível em todo o template(componente.html), mas não no componente(componente.ts).
Para ser acessada no componente, tem duas formas:
-pode ser acessada através do decorator @ViewChild('nome_da_variavel')

@ViewChild('imputName') campo: ElementRef;
//para usar depois basta fazer:
//this.campo.nativeElement.value;

-pode ser passada para o componente através de um event:

<button type="button" class="btn btn-primary"
        (click)="adicionar(imputName.value)">Adicionar</button>
// valor será recebido no método adicionar(valor) do componente.ts.

Ciclo de vida:

- construtor
- ngOnChanges => disparado sempre quando o valor do property-binding é atualizado.
- ngOnInit => Quando o componente é inicializado.
- ngDoCheck => A cada ciclo de verificação de mudanças.
- ngAfterContentInit => depois de inserir conteúdo externo na view
- ngAfterContentChecked => a cada verificação de conteúdo inserido
- ngAfterViewInit => depois que o angular inicializa os componentes views e views filhas.
- ngAfterViewChecked => após a checagem dos componentes views e views filhas.
- ngOnDestroy => antes da destruição do componente.

Diretivas

- diretivas de componentes => diretivas dos nossos componentes => <meu-componente></meu-componente>
- diretivas estruturais => vem precedida de * (asterísco) => *ngFor, *ngIf, *ngSwitch, etc.
- diretivas de atributos => interagem com o elemento que doram aplicadas => ngStyle, ngClass, etc.
Ouvindo propriedades e eventos do hopedeiro da diretiva:
- @HostListener('evento')
- @HostBinding('propriedade')
- pode-se usar o @input() para receber valores de quem for usar o componente com a diretiva criada.
Exportar a diretiva:
- As diretivas podem ser exportadas e terem seus métodos expostos da seguinte forma:

@Directive({
  selector: '[nome_do_seletor_da_diretiva]',
  exportAs: 'nome_da_diretiva'
})

- Isso possibilita que sejam usados de outras formas, veja como pegar a diretiva e usar seus métodos:

<input type="text" class="form-control" [(ngModel)]="nome"
        (focus)="adicionado = false" nome_do_seletor_da_diretiva
        #campo="nome_da_diretiva">

<button class="btn btn-info" (click)="campo.metodo_da_diretiva()">Clique-me</button>


NG-CONTENT
- Permite passar conteúdo (incluindo outros componentes) para um componente.
- Se eu tiver um componente chamado exemplo-ng-content.component.html com o seguinte conteúdo:

<div class="panel panel-default">
  <div class="panel-heading">
    <ng-content select=".titulo"></ng-content>
  </div>
  <div class="panel-body">
    <ng-content select=".corpo"></ng-content>
  </div>
</div>

pode ser usado em outro componente desta forma:

<app-exemplo-ng-content>
    <div class="titulo">Título do Painel</div>
    <div class="corpo">
        Conteúdo passado para o componente.
    </div>
    <div class="corpo">
        Conteúdo passado para o componente 2.
    </div>
</app-exemplo-ng-content>

Form validations

- autocomplete="off" => desabilita autocomplite no formulário
- diretivas do angular:

required, email, minlength="5", maxlength="15", pattern="[a-zA-Z ]*"

- pegar o formulario:

<form #meuForm="ngForm">

- pegar campos do formulário:

<input type="text" #nome="ngModel" name="nome" [(ngModel)]="cliente.nome" />

- validar:

nome.haserror('required') => pode ser usado em um ngIf por exemplo e exibir ou não uma mensagem.

- propriedades interessantes:

nome_do_campo.touched => se o campo foi tocado
nome_do_campo.pristine => se o campo já teve algum valor ou está virgem
nome_do_campo.dirty => se o campo já foi alterado

- estilizando componentes invalidos dos forms com as classes do angular:

input.ng-invalid.ng-touched, select.ng-invalid.ng-touched {
  border: 1px solid red;
}

- binding de class:

<input type="text" #nome="ngModel" name="nome" [(ngModel)]="cliente.nome" [class.nome_da_classe]="propriedade_ou_condicao_boolean"/>

- binding de style:

<input type="text" #nome="ngModel" name="nome" [(ngModel)]="cliente.nome" [style.nome_da_propriedade]="propriedade_ou_condicao_boolean ? 'valor_1' : 'valor_2' "/>

- resetar um formulario:

<form autocomplete="off" #usuarioForm="ngForm"
      (ngSubmit)="salvar(usuarioForm)">

No submit do form estamos chamando o método salvar e passando o próprio form.
Então no componente basta resetarmos o form:

salvar(form: NgForm) {
//faz outras coisas
...
//reseta o formulário
    form.reset();
  }

Serviços

- A anotação @Injectable() permite que o serviço receba injeção de outros serviços.
- Serviços servem para comunicação com servidor.
- Para evitar duplicação de código.
- Lógica da aplicação deve estar nos serviços.
- Classes utilitárias devem ser feitas como serviços.
- Serviços são singletons se forem adicionados dentro de qualquer módulo na propriedade "providers: []" do decorator @NgModule. O que permite compartilhar recursos entre componentes naturalmente (listas, variáveis, etc).
- Caso sejam adicionados na propriedade "providers: []" do componente, serão uma instância para cada componente e
componentes filhos, o que já impede esse compartilhamento global.
- Uma vez criadas instâncias separadas por componentes, a comunicação entre eles só pode ser feita através do EventEmitter e se o EventEmitter for uma propriedade estática.

static variavel_evento = new EventEmitter();

//dentro de algum método
this.variavel_evento.emit( objeto_ou_valor );

- Quem for escutar o evento deve fazer da seguinte forma:

// no contrutor recebe o serviço
constructor(private cursosService: CursosService) {}

// no ngOnInit se inscreve como ouvinte
CursosService.criouNovoCurso.subscribe(
      //faz alguma coisa aqui
curso => this.cursos.push(curso)
    );

 - Os services são declarados no provider dos módulos ou componentes como já descrito acima,
da forma abreviada ou extensa.

Abreviada:

@NgModule({
  declarations: [
    AppComponent,
    FuncionarioCardComponent,
    FuncionarioFormComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    FuncionarioService
  ],
  bootstrap: [AppComponent]
})

Extensa

@NgModule({
  declarations: [
    AppComponent,
    FuncionarioCardComponent,
    FuncionarioFormComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    { provide: FuncionarioService, useClass: FuncionarioService, }
  ],
  bootstrap: [AppComponent]
})

Na forma extensa, é possível fornecer um método Factory ao invés de uma classe.
A vantagem é que a factory pode instanciar uma classe com parâmetros se for necessário.

const criarFuncionarioService = () => {
  return new FuncionarioAbreviadoService(param1, param2...);
}

@NgModule({
  declarations: [
    AppComponent,
    FuncionarioCardComponent,
    FuncionarioFormComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    { provide: FuncionarioService, useFactory: criarFuncionarioService }
  ],
  bootstrap: [AppComponent]
})

Rotas

- Cria-se uma constante em um arquivo app.routing.ts ou no app.module.ts que seja
do tipo Routes do pacote "@angular/router". Esse  paths e componentes.
- O Routes é um array de paths e componentes e deve ser preenchido como no
exemplo abaixo:

const  APP_ROUTES: Routes = [
  { path: 'lancamentos', component: LancamentosPesquisaComponent },
  { path: 'lancamentos/novo', component: LancamentosCadastroComponent },
  { path: 'pessoas', component: PessoasPesquisaComponent },
  { path: 'pessoas/novo', component: PessoasCadastroComponent }
]

- Essa constante deve passar para uma constante do tipo ModuleWithProviders do pacote "@angular/core".
- Para isso é preciso usar o RouterModule do "@angular/router". Se essa constante foi criada em um arquivo
separado, ela deve ser exportada. O código fica assim:

export const routing: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);

- Para usar as rotas coloca-se a diretiva routerLink nos links recebendo o devido path declarado na constante
que no exemplo chamei de APP_ROUTES.

<li class="navbar-menuitem"><a routerLink="lancamentos">Lançamentos</a></li>

- Para as rotas funcionarem, em cada módulo é necessário importar o RouterModule do '@angular/router'.

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    RouterModule
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})

- Para destacar rotas ativas, basta usar a diretiva routerLinkActive passando o nome da classe CSS que contém o estilo desejado.

<li class="navbar-menuitem" routerLinkActive="ativo"><a routerLink="lancamentos">Lançamentos</a></li>

Events

(focus)="myMethod()"  // An element has received focus
(blur)="myMethod()"   // An element has lost focus

(submit)="myMethod()"  // A submit button has been pressed

(change)="myMethod()"

(scroll)="myMethod()"

(cut)="myMethod()"
(copy)="myMethod()"
(paste)="myMethod()"

(keydown)="myMethod()"
(keypress)="myMethod()"
(keyup)="myMethod()"

(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"

(click)="myMethod()"
(dblclick)="myMethod()"

(drag)="myMethod()"
(dragover)="myMethod()"
(drop)="myMethod()"








sábado, 16 de junho de 2018

Data Attributes – O que são e como usar


Olá, hoje eu vou falar sobre algo que eu particularmente acho muito legal do HTML 5, que são os Data Attributes, ou simplesmente atributos de dados (data-*). Não é algo novo, rsrsrs mas muitas pessoas não usam e muitas usam e nem entendem o que estão fazendo. Você já precisou recuperar no JavaScript valores de um <li>, <ul>, <div> ou qualquer outra tag que não lhe dê a opção de retornar valores como as tags<input>? Bom, com os Data Attributes isso é possível.

O HTML 5 foi desenvolvido para ser extensível, podendo ter dados associados a um elemento específico através de atributos mesmo que esses atributos não tenham sido definidos pela linguagem. Ou seja, podemos adicionar informações a atributos não padrão do HTML e depois recuperar essas informações para usá-las de alguma forma.

Esses atributos valorados não devem conter nenhuma informação confidencial, pois ficam expostos no HTML. Servem para facilitar a manipulação de informações no JavaScript e CSS. Com ele podemos adicionar informações em links, botões, formulários, etc.

A forma de usar é bastante simples, basta declarar um atributo data-* e atribuir o valor desejado. Ex:

<article
  id="carrosEletricos"
  data-columns="3"
  data-index-number="12314"
  data-parent="carros">
...
</article>

Uma vez tendo criado os atributos podemos acessá-los via JavaScript de várias formas e trabalhar em cima dos valores, inclusive alterando-os.

Podemos acessar o valor do atributo diretamente através de um método disponibilizado para varrer os atributos dos elementos HTML - element.getAttribute(“nomeDoAtributo”);. Caso o atributo não exista, o valor retornado será null ou “”. Esse método pode ser usado para atributos padrões do HTML ou os Data Attributes criados. Ex:

<script>
var artigo = document.getElementById(‘carrosEletricos’);
var atributo = artigo.getAttribute(“columns”);
</script>

Mas o padrão recomendado é usando a propriedade dataset do DOMStringMap para recuperar os dados, então teríamos:

<script>
var article = document.getElementById(‘carrosEletricos’);

var colunas = article.dataset.columns; // "3"
var index = article.dataset.indexNumber; // "12314"
var pai = article.dataset.parent; // "carros"
// setar um valor
article.dataset.columns = 5;
</script>

          É claro que podemos também acessar via JQuery:

<script>
var artigo = $("#carrosEletricos");

var colunas = artigo.data("columns"); // "3"
var index = artigo.data("indexNumber"); // "12314"
var pai = artigo.data("parent"); // "cars"
</script>

Abaixo segue um outro exemplo onde temos uma lista de funcionários onde queremos armazenar alguns valores como matricula, idade e sexo, mas não mostrá-los na tela:

<ul>
  <li data-matricula="001" data-idade="23" data-sexo="M" onclick="chamaFuncao(this)">Pedro</li>
  <li data-matricula="002" data-idade="28" data-sexo="M" onclick="chamaFuncao(this)">Daniel</li>
  <li data-matricula="003" data-idade="30" data-sexo="F" onclick="chamaFuncao(this)">Joana</li>
</ul>

Os atributos criados também podem ser usados diretamente no CSS, para isto vamos voltar ao exemplo da tag artigo. Para mostrar o atributo data-parent como conteúdo poderíamos ter o código abaixo:


article::before {
  content: attr(data-parent);
}

Ou usar os “Attribute Selectors” – atributos seletores, que correspondem a elementos com base em seu valor ou simplesmente em sua existência:

// baseado na existência:
article[data-columns] {
       border-right: 1px #bbdefb groove;
}

// baseado no valor:
article[data-columns='3'] {
       width: 400px;
}

article[data-columns='4'] {
       width: 600px;
}

Quando usado por valor, o CSS traz várias opções de comparação e não apenas o “=”. Essas opções funcionam como as Regex do Java ou RegExp do JavaScript. Veja os exemplos:
  
Consideremos o HTML abaixo:

<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>

<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好!</div>
<div lang="zh-TW">世界您好!</div>
<div data-lang="zh-TW">?世界您好!</div>


Tendo então as seguintes regras CSS:

a {
  color: blue;
}

/* links internos, começando com "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links com "example" em qualquer parte da URL */
a[href*="example"] {
  background-color: silver;
}

/* Links com "insensitive" em qualquer parte da URL,
   desconsiderando letras maiúsculas e minúsculas -> (i) */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links que terminam ".org" */
a[href$=".org"] {
  color: red;
}

/* Todas as divs com atributo 'lang' são bold. */
div[lang] {
  font-weight: bold;
}

/* Todas as divs em US são azuis. */
div[lang~="en-us"] {
  color: blue;
}

/* Todas as divs em Português são verdes. */
div[lang="pt"] {
  color: green;
}

/* Representa elementos com um nome de atributo
   cujo valor pode ser exatamente igual ou pode
   começar com valor imediatamente seguido por um hífen( - ).
   É frequentemente usado para correspondências de subcódigo
   de idioma.
   Todas as divs em Chinês são vermelhas, mesmo se
    simplificado (zh-CN) ou tradicional (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* Todas as divs com 'data-lang' Chinês Traditional
   são roxas. */
div[data-lang="zh-TW"] {
  color: purple;
}

Os resultados seriam:



Espero que possa ter ajudado, seguem os links que usei para fazer esse post:


segunda-feira, 19 de fevereiro de 2018

Publicando módulo Angular 4 no NPM

O NPM serve para instalar, compartilhar e distribuir códigos. É um gerenciador de pacotes para JavaScript e também um repositório para compartilhamento de códigos fonte onde temos inúmeros pacotes de códigos reusáveis. Para quem trabalha com o Java, seria uma espécie de Maven para JavaScript.

O NPM é instalado juntamente com o Node.js, que pode ser baixado do seguinte endereço:


Após instalado você pode executar o seguinte comando para ver as versões do Node.js e do NPM respectivamente:

$       node -v
$       npm -v

Mesmo tendo baixado o NPM juntamente com o Node.js, eles são independentes e provavelmente você precisará atualizar sua versão do NPM, para isso use o comando  npm install npm@latest -g.

Depois de instalado o NPM, é preciso criar uma conta caso você não tenha, ou fazer login para poder compartilhar seus pacotes. A criação da conta é bem simples e eles pedem um username, password e e-mail. É necessário a confirmação do e-mail antes de publicar algo caso a conta seja nova. O comando para criar uma conta é:

$       npm adduser

Ao criar a conta ele já loga no NPM. Para efetuar logins posteriores, os mesmos dados são pedidos, e o comando é:

$       npm login

Uma vez tendo usuário e senha e estando logado, devemos entrar no diretório do projeto que queremos compartilhar e prepará-lo para ser compartilhado. Para isso precisamos do ng-packgr. Essa biblioteca vai compilar nosso código para um formato de pacote do Angular. Digite o seguinte comando:

npm install ng-packagr --save-dev

Então crie um novo arquivo chamado ng-package.json na raiz do seu projeto. Insira o seguinte trecho de código nele:

{
    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
    "whitelistedNonPeerDependencies": ["."],
    "lib": {
       "entryFile": "index.ts"
    }
}

A parte marcada de amarelo acima eu adicionei depois de tentar publicar uma atualização em um componente e me deparar com um erro do NPM não permitindo publicar pacotes com dependências, porém o componente não funcionava sem as dependências publicadas. Essa linha adiciona uma "lista branca" de dependências que podem ser publicadas, colocando o ponto (".") eu defini que todas as dependências podem ser publicadas.

    Agora precisamos criar o arquivo que indicamos como arquivo de entrada no “entryFile”. Esse arquivo deve também estar na raiz do seu projeto e no conteúdo precisamos exportar nossos módulos como abaixo:

Export * from “./src/app/caminho_do_seu_modulo/seumodulo.module”

O módulo que for exportado será acessado por quem usar nossa biblioteca. Lembre-se de no decorator exportar os componentes, para que eles possam ser usados fora do módulo, como no exemplo abaixo:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { FormsModule } from '@angular/forms';

import { SeuComponent } from './seu-component.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    BrowserAnimationsModule
  ],
  declarations: [SeuComponente],
  exports: [
    SeuComponente
  ]
})
export class SeuModule { }

Precisamos agora adicionar um novo script no package.json, atualizar a versão do seu projeto e remover a propriedade "private": true. Se você não atualizar a versão a cada vez que for publicar, não será possível uma nova publicação no NPM. Depois de remover a propriedade "private": true, dentro do arquivo procure a propriedade “scripts” e adicione ao final:

“packagr”: “ng-packagr -p ng-package.json”

Agora execute o comando npm run packagr, que irá gerar a dist da nossa biblioteca. Note que foi criada uma pasta dist. Ela é o conteúdo que deve ser publicado.

Por fim, execute os comandos npm pack para gerar um arquivo .tgz com a versão do nosso projeto e o comando: npm publish dist para que possamos publicar a nossa biblioteca no portal npm.


Segue o link de um componente que publiquei no NPM e o fonte no GitHub:










Links de referência:

https://imasters.com.br/desenvolvimento/publicando-modulo-angular-4-no-npm/?trace=1519021197&source=single
https://medium.com/@programadriano/nodejs-criando-um-m%C3%B3dulo-global-e-publicando-no-npm-9bb046a1db4f 
http://clubedosgeeks.com.br/artigos/publicando-pacotes-no-npm