Angular Libraries

Angular Libraries são construídas como uma solução de problemas gerais, tais como apresentar uma interface unificada de usuário, apresentar dados e permitir a entrada de dados. Os desenvolvedores podem criar soluções gerais para domínios particulares que podem ser adaptadas para reutilização em diferentes aplicações. Estas soluções podem ser construídas como bibliotecas Angulares e estas bibliotecas podem ser publicadas e compartilhadas como pacotes npm.

Uma biblioteca Angular é um projeto angular, mas é diferente da aplicação Angular nos termos em que ela não pode rodar sozinha. Ela é importada e usada na aplicação.

Utilização das bibliotecas Angular

• Bibliotecas Angulares estendem as funcionalidades de base da Angular. Por exemplo, se você quiser adicionar formulários reativos a um aplicativo, adicione o pacote da biblioteca usando ng add @angular/forms, então importe o ReactiveFormsModule da biblioteca @angular/forms em seu código do aplicativo.
• Angular Material é um exemplo de uma biblioteca grande, de uso geral, que fornece componentes UI sofisticados, reutilizáveis e adaptáveis.

Instalando bibliotecas

Bibliotecas são publicadas como pacotes npm e integradas com a CLI Angular. Para integrar código de biblioteca reutilizável em uma aplicação, temos que instalar o pacote e importar a funcionalidade fornecida onde devemos usá-lo.

Syntax

O comando ng add usa o gerenciador de pacotes npm para instalar o pacote da biblioteca, e invoca esquemas que estão incluídos no pacote para outros andaimes dentro do código do projeto, como adicionar instruções de importação, fontes, temas, e assim por diante.

Digitação da biblioteca

Os pacotes da biblioteca incluem digitação em arquivos .d.ts. Se o pacote da sua biblioteca não incluir digitação e a IDE mostrar um erro, você tem que instalar o @types/ package associado da biblioteca.

Por exemplo, suponha que você tenha uma biblioteca chamada d1:

Tipos definidos em um pacote @types/ para uma biblioteca instalada no espaço de trabalho são automaticamente adicionados à configuração TypeScript para o projeto que usa essa biblioteca. O TypeScript procura por tipos na pasta node_modules/@types por padrão, assim você não precisa adicionar cada tipo de pacote individualmente.

Se uma biblioteca não contém digitação em @types/, você ainda pode usá-la adicionando manualmente digitações para ela. Você pode fazer isso seguindo:

Crie um arquivo typings.d.ts na sua pasta src/. Este ficheiro é automaticamente incluído como definição de tipo global.

Adicionar o seguinte código em src/typings.d.ts.

Adicionar o seguinte código no componente ou arquivo que usa a biblioteca:

Bibliotecas de atualização

Você pode atualizar as bibliotecas usando o comando ng update. Ele atualiza as versões individuais das bibliotecas. A CLI Angular verifica a última versão publicada da biblioteca, e se ela achar que a última versão é mais nova que a sua versão instalada, faz o download e atualiza seu pacote.json para corresponder à versão mais recente.

Syntax

Nota: Quando você atualiza a Angular para uma nova versão, você deve se certificar de que qualquer biblioteca que você esteja usando esteja atualizada. Se as bibliotecas tiverem interdependências, elas também devem ser atualizadas.

Como adicionar uma biblioteca ao escopo global em tempo de execução

Bibliotecas JavaScript Legacy que não são importadas para um aplicativo podem ser adicionadas ao escopo global em tempo de execução e carregadas como se estivessem em uma tag de script. Você tem que configurar a CLI para fazer isso em tempo de compilação usando as opções “scripts” e “estilos” do alvo de compilação no arquivo de configuração da CLI, angular.json.

Por exemplo, para usar a biblioteca Bootstrap 4, primeiro instale a biblioteca e suas dependências usando o gerenciador de pacotes npm:

Adicionar o arquivo CSS Bootstrap ao array “styles”:

Criar novas bibliotecas

Pode criar e publicar as suas próprias novas bibliotecas para ampliar as funcionalidades Angular. É geralmente usado quando você precisa resolver o mesmo problema em mais de um aplicativo (ou quer compartilhar sua solução com outros desenvolvedores), você tem um candidato para uma biblioteca.

Por exemplo: Você pode criar um botão que envie usuários para o site de sua empresa que seria incluído em todos os aplicativos que sua empresa constrói.

Abrir CLI Angular e usar a seguinte sintaxe para criar uma nova biblioteca.

Sintaxe

Esta criará uma pasta projetos/minha biblioteca no seu espaço de trabalho, que contém um componente e um serviço dentro de um NgModule. O arquivo de configuração do espaço de trabalho, angular.json, é atualizado com um projeto do tipo ‘biblioteca’.

Agora, você pode construir, testar e lintar seu projeto usando os seguintes comandos: