Customizando o Angular Cli

Angular CLI

Faz alguns dias que estou na saga de entender como o Angular Cli trabalha por baixo dos panos, ainda estou nessa batalha, mas depois de ler alguns tutoriais, encontrei algo que achei legal compartilhar 😉

No final desse artigo deixarei registrado as referências que me inspiraram a escrever esse artigo.

Bom, desde de a versão 1.4.2 do Angular Cli é possível utilizar o Schematics collection para criação de um novo APP. Caso tenha interesse em entender ele melhor, segue uma descrição abaixo junto com um link para sua Documentação.

Schematics are generators that transform an existing filesystem. It can create files, refactor existing files, or move files around.
What distinguish Schematics from other generators, such as Yeoman or Yarn Create, is that schematics are purely descriptive; no changes are applied to the actual filesystem until everything is ready to be committed. There is no side effect, by design, in Schematics.

Backup do Angular Cli

Para que possamos fazer os nossos testes com segurança, vamos fazer uma cópia do diretório do Angular Cli com todos os seus componentes instalados no nosso computador. Como eu estou utilizando um mac nesse artigo, o path dos módulos do meu cli estão no seguinte path:

/usr/local/lib/node_modules/@angular/cli/node_modules

Nosso próximo passo será criar um novo diretório dentro de node_modules, depois iremos copiar os pacotes do @schematics para dentro dele. Para isso, execute os comandos abaixo no seu terminal:

mkdir -p @custom/myangular
cp -R @schematics/angular/* @custom/myangular/

Para verificar se os pacotes foram copiados corretamente, digite no seu terminal: ls @custom/myangular/. Podemos ver a lista dos arquivos copiados na imagem abaixo:

listagem dos componentes do schematics

Para que o comando de criação de um novo app funcione corretamente, nós precisamos adicionar o — collection, dessa forma não iremos precisar alterar outros paths e nem a configuração original do nosso Angular Cli.

Agora, vamos criar um novo projeto com base no @custom criado. Para isso, execute o seguinte comando no seu terminal.

ng new [email protected]/myangular myfirstapp

Caso o comando anterior tenha executado corretamente, você terá criado um novo projeto a partir do seu @custom.

Navegando pelo @custom

Agora que nós temos um @custom do nosso cli, nós podemos alterar ele e criar novos projetos como vimos no passo anterior. Vamos agora navegar pela estrutura do nosso custom. Podemos ver na imagem abaixo a estrutura do nosso custom aberta no VS Code.

Estrutura @custom

Na raiz do nosso projeto, nós temos a pasta application. Dentro dela estão todos os arquivos necessários para criação de um novo app.

  • schema.json: tem a descrição de todos arquivos definidos no nosso arquivo index.js
  • index.js: contém as funções necessárias para criação do nosso projeto
  • files: diretório contendo os arquivos que irão para raiz do nosso projeto
  • other-files: diretório com o nosso AppComponent e AppModule

Para que você possa ter um melhor entendimento, vamos atualizar ele para que todos os nossos novos projetos sejam criados com com o compodoc.

Caso você ainda não conheça o compodoc, segue link de um artigo onde demonstro a sua estrutura Angular: Conhecendo o compodoc.

Adicionando o compodoc

Para adicionar o compodoc no seu custom, você irá precisar atualizar o arquivo package.json que está no caminho: @custom -> application/files/ com o código abaixo:

Agora para validar o nosso passo anterior, vamos criar um novo projeto. Para isso, execute o seguinte comando no seu terminal:

ng new [email protected]/myangular angular-compodoc

Em seguida, execute o comando abaixo no seu terminal, ele irá criar um novo diretório dentro do seu projeto chamado documentation.

npm run generate-docs

Assim que o passo anterior finalizar, execute o comando npm run servedocs no seu terminal, ele deve abrir a documentação criada no seguinte endereço: http://127.0.0.1:8080

Com isso nós conseguimos customizar o nosso cli para criar novos projetos com uma estrutura básica, por exemplo com: Material, Bootstrap entre outros componentes, pacotes … etc

Referências

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

Maze Runner – Correr ou Morrer

Maze Runner – Correr ou Morrer O filme mostra o jovem Thomas (Dylan O’Brien), que vai parar em um lugar desconhecido, sem memória que o
TheWildsVidasSelvagens

the wilds: vidas selvagens

The Wilds: Vidas Selvagens The Wilds: Vidas Selvagens é uma série dramática de TV americana criada por Sarah Streicher que foi lançada no Prime Video
RockBottomRiser

Rock Bottom Riser

Rock Bottom Riser 01/03/2021(US) – Documentário – 1h 10min –   Nota: 0/10   Sinopse     Elenco Nainoa Thompson Como – master navigator Moses
SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home