Criar Biblioteca Angular

por

Hoje vamos criar uma nova biblioteca reutilizável. Se você mesmo estiver criando o mesmo componente em mais de um aplicativo (ou se você quiser compartilhar seu componente com outros desenvolvedores), você tem a necessidade de uma biblioteca.

Criar o projeto

Usaremos cli angular para gerar o esqueleto da biblioteca. Se você não tiver o cli angular instalado, consulte o guia de instalação do cli angular.

Os seguintes comandos irão gerar o projeto angular my-project e a biblioteca my-lib

ng new my-projectcd my-projectng generate library my-lib
>

Entrar no modo tela cheia Sair do modo tela cheia

Isto cria a pasta projects/my-lib em my-project, que contém
my-lib.component.ts e my-lib.service.ts. Angular cli também cria public-api.ts arquivo em pasta my-lib. Este arquivo contém as seguintes linhas de código,

export * from './lib/my-lib.service';export * from './lib/my-lib.component';export * from './lib/my-lib.module';
>

Enter fullscreen mode Exit fullscreen mode

Este arquivo define o que está disponível para os usuários da biblioteca (A.K.A public API).

Se você abrir my-lib.component.ts, você verá o seguinte código:

import { Component, OnInit } from '@angular/core';@Component({ selector: 'lib-my-lib', template: `<p>my-lib works!</p>`, styles: })export class MyLibComponent implements OnInit { constructor() { } ngOnInit(): void {}}
>

Entrar no modo tela cheia Sair do modo tela cheia

Esta saída simples da biblioteca my-lib works! e usaremos o seletor,
<lib-my-lib></lib-my-lib> para consumir o componente.

Instale a biblioteca como dependência npm.

Para usar qualquer biblioteca em angular, você precisa instalá-la a partir do gerenciador de pacotes, como npm. Neste exemplo não iremos publicar nossa biblioteca para o gerenciador de pacotes npm. Se você quer aprender sobre como publicar uma biblioteca angular, consulte o guia angular.

Agora vamos instalar my-lib como dependência npm do arquivo. Abra package.json e adicione "my-lib": "file:projects/my-lib" no bloco dependências, Veja o trecho de código abaixo.

 "dependencies": { ... "@angular/router": "~9.1.4", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2", "my-lib": "file:projects/my-lib" }
>

Entre no modo tela cheia Sair do modo tela cheia

my-lib é o nome do pacote que você verá em node_modules pasta e file:projects/my-lib é a biblioteca real. Se tivéssemos publicado nossa biblioteca para npm, substituiríamos file:projects/my-lib pelo número da versão(0.0.1).

Se você executar npm install, você vai notar my-lib adicionado em node_modules pasta. Agora podemos importar e usar a biblioteca em nosso projeto. veja o código snippet abaixo:

import {MyLibModule} from 'my-lib';@NgModule({ declarations: , imports: , providers: , bootstrap: ,})export class AppModule { }
>

Enter fullscreen mode Exit fullscreen mode

Agora importamos o módulo da biblioteca em nosso projeto, podemos usar MyLibComponent. Abrir app.component.html e substituir todo o código por
<lib-my-lib></lib-my-lib>.

Executar o aplicativo

Executar npm start ou ng serve para iniciar o aplicativo. Abra o navegador e vist http://localhost:4200, você verá my-lib works! exibido.

Parabéns você criou com sucesso a biblioteca angular!!

Código disponível no github

Deixe um comentário