Angular Academy · Aula

Criando com ng-packagr

Produza a saída no formato de pacote do Angular.

Criando com ng-packagr é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

As bibliotecas precisam de uma compilação especial

Você não pode publicar TypeScript e modelos sem compilação; os consumidores esperam uma saída compilada e padronizada. As bibliotecas Angular são compiladas no Angular Package Format (APF) usando o ng-packagr, a ferramenta que a CLI utiliza internamente.

O Angular Package Format

O APF é a estrutura oficial para bibliotecas Angular distribuíveis: módulos ES otimizados, definições de tipos e metadados organizados para que qualquer aplicativo Angular possa consumir a biblioteca e eliminar código não utilizado de forma confiável.

Compilando uma biblioteca

Execute ng build direcionando o comando para o projeto da biblioteca. A CLI invoca o ng-packagr e grava a saída empacotada em dist/.

ng build ui-kit
# outputs dist/ui-kit in Angular Package Format

O que o ng-packagr produz

A pasta dist contém pacotes FESM (módulo ES achatado) compilados, arquivos de tipos .d.ts e um package.json gerado com os campos de entrada corretos module e types.

dist/ui-kit/
  fesm2022/ui-kit.mjs   # flattened ES module
  index.d.ts            # type declarations
  package.json          # generated, points to the above

A configuração ng-package.json

Cada biblioteca tem um ng-package.json que informa ao ng-packagr o destino da saída e o arquivo de entrada. A CLI o lê durante a compilação.

// projects/ui-kit/ng-package.json
{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ui-kit",
  "lib": { "entryFile": "src/public-api.ts" }
}

Compilação de produção

Compile com a configuração de produção para ativar a otimização completa. A saída é o que você publicará; portanto, sempre empacote a versão otimizada.

ng build ui-kit --configuration production

Compilação parcial

As bibliotecas são compiladas no modo Ivy parcial, não totalmente compiladas. Isso as torna compatíveis entre versões do Angular; o aplicativo consumidor conclui a compilação (vinculação) durante sua própria compilação.

Dependências de pares na saída

O ng-packagr mantém o Angular e outras dependências de pares externas, em vez de incluí-las no pacote. O package.json gerado as lista como peerDependencies, para que o consumidor forneça uma única cópia compartilhada.

Recursos estáticos e estilos

Você pode incluir estilos e recursos estáticos no pacote. Declare-os em ng-package.json para que o ng-packagr os copie e processe na saída de dist para os consumidores.

"assets": ["./styles/theme.css"]

Verificando a compilação

Depois da compilação, inspecione dist/ui-kit: confirme o pacote FESM, os arquivos .d.ts e um package.json cujos campos exports/module apontem para os arquivos compilados. É exatamente isso que o npm receberá.

Modo de observação para desenvolvimento

Recompile automaticamente enquanto edita adicionando --watch. Em conjunto com um aplicativo de demonstração, isso proporciona um ciclo rápido de feedback durante o desenvolvimento da biblioteca.

ng build ui-kit --watch

Verificação rápida

Para qual formato as bibliotecas Angular são compiladas?

Recapitulação

Compile bibliotecas com ng build <lib>, que executa o ng-packagr para gerar o Angular Package Format (pacotes FESM, .d.ts e package.json gerado) em dist/. Configure a saída por meio de ng-package.json, compile em produção, conte com a compilação parcial para obter compatibilidade entre versões e mantenha as dependências de pares externas.

Perguntas Frequentes

A aula “Criando com ng-packagr” é grátis?

Sim — o texto completo de “Criando com ng-packagr” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Criando com ng-packagr”?

Produza a saída no formato de pacote do Angular. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Criando com ng-packagr”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy