Criando componentes em subdiretórios e sem o arquivo spec. (Angular)

Olá, pessoa desenvolvedora! Neste guia rápido, vou desvendar como utilizar a Angular CLI para criar componentes de maneira eficaz, focando em dois pontos que podem economizar seu tempo: a criação de componentes sem os arquivos spec e a organização em subdiretórios. Se você quer agilizar seu trabalho sem se perder em detalhes, veio ao lugar certo! Prepare-se para algumas dicas valiosas.

Neste post mostro alguns exemplos de como utilizar a linha de comando para criar componentes em subdiretórios e sem os arquivos spec.

Só um alerta, não vou entrar em assuntos como convenções de nomes e outros padrões. A ideia aqui é demonstrar os comandos.

Criando um componente

Bom, você já deve saber, mas para criar um componente usando a linha de comando, a sintaxe é a seguinte:

ng generate component <nome> [opcoes]
ng g c <nome> [opcoes]

ng generate component foo
ng g c foo

Ambos comandos acima vão criar um componente chamado foo, dentro da pasta app. (app/foo/…). O segundo é apenas um atalho bem útil.

Criando um componente sem o arquivo spec

Vejo casos em que as pessoas criam os componentes e depois apagam os arquivos spec na mão. Existe uma forma mais fácil.

ng g c foo --skipTests=true

O comando acima vai ter o mesmo efeito dos anteriores, mas o componente foo vai ser gerado sem os arquivos spec. A flag —skipTests aceita os valores true (que vai fazer com que os arquivos spec não sejam criados) e false (padrão. criar os arquivos spec). Não informar esta flag ou informar e passar o valor false (–skipTests=false) tem o mesmo efeito. (Atenção, a flag é case sensitive e o T de Tests é maiúsculo.)

Criando um componente em um subdiretório

Até o momento, criamos um componente chamado foo, que fica na pasta app/foo. Agora vou mostrar como criar um componente dentro desta pasta foo.

ng g c foo/bar

Simples assim. Basta informar o caminho do componente, a partir da pasta app.

Todavia, existe um pulo do gato neste comando. A pasta app é a raiz do modulo app (app.module.ts). Se você possuir outro modulo (shared, por exemplo), este comando não vai funcionar, pois a cli não saberá onde colocar o novo componente.

Para resolver o problema, você deve informar também o módulo.

ng g c foo/bar --module=app.module

O valor informado no argumento –module deve ser o nome do arquivo do modulo sem o final .ts. (app.module.ts == app.module, shared.module.ts == shared.module).

tl;dr

Resumindo o post todo: Para criar o componente bar dentro da pasta foo do modulo shared e não gerar os arquivos spec:

ng g c foo/bar --module=shared.module --skipTests=true

Espero ter ajudado.