Restaurando sufixos nos arquivos do Angular(21).

#angular #architecture #frontend #webdev

Do que se trata os sufixos no Angular?

Os sufixos nos arquivos do Angular (como .component, .service, .module) são convenções de nomenclatura recomendadas pelo Guia de Estilo oficial para identificar rapidamente a responsabilidade e o tipo de cada arquivo.

Eles funcionam como metadados visuais, permitindo que você diferencie arquivos com o mesmo nome base e facilitando a busca rápida em IDEs.

Como configurar?

Simplesmente vamos copiar este código e colar dentro do campo "schematics": {}, no arquivo angular.json para que a aplicação gere arquivos com sufixos através de comandos como "ng g c exemplo". Copie o código:

"@schematics/angular:component": { "type": "component" },
"@schematics/angular:directive": { "type": "directive" },
"@schematics/angular:service": { "type": "service" },
"@schematics/angular:guard": { "typeSeparator": "." },
"@schematics/angular:interceptor": { "typeSeparator": "." },
"@schematics/angular:module": { "typeSeparator": "." },
"@schematics/angular:pipe": { "typeSeparator": "." },
"@schematics/angular:resolver": { "typeSeparator": "." }

Antes:

Depois:

⚠️ A partir dessa alteração sua aplicação já está pronta!

Quais/como os arquivos são afetados?

Após as alterações os arquivos irão carregar consigo um sufixo do qual define e descreve sua devida função. Dentro do escopo dos arquivos alterados serão: