Angular Schematics Demo

Projeto Angular com Custom Schematics para gerar features completas com estrutura padronizada.

🎯 Objetivo

Simplificar a criação de novas features Angular com uma estrutura consistente incluindo:

• Página standalone
• Sistema de roteamento
• Serviço
• Store (com signals)
• Modelos de dados

📦 Schematics Disponíveis

Feature Schematic

Cria uma feature completa com toda a estrutura necessária.

Uso

ng generate ./dist/schematics:feature <nome-da-feature>

Exemplos

# Feature simples
ng generate ./dist/schematics:feature dashboard

# Feature com kebab-case
ng generate ./dist/schematics:feature user-profile

# Feature composta
ng generate ./dist/schematics:feature products-management

Opções

• --path (padrão: src/app/features) - Caminho base para features
• --skipRouting (padrão: false) - Não atualizar app.routes.ts

Estrutura Gerada

src/app/features/dashboard/
├── pages/
│   ├── dashboard.page.ts          # Componente page standalone
│   ├── dashboard.page.html        # Template
│   └── dashboard.page.scss        # Estilos
├── components/                    # Componentes específicos da feature
├── data/
│   ├── dashboard.service.ts       # Serviço
│   └── dashboard.store.ts         # Store com signals
├── models/
│   └── dashboard.model.ts         # Interfaces de dados
└── dashboard.routes.ts            # Rotas da feature

🚀 Como Usar

1. Instalar dependências

npm install

2. Compilar schematics

npm run schematics:build

Isso vai:

• Compilar TypeScript da schematic
• Copiar templates
• Limpar arquivos desnecessários

3. Gerar uma feature

ng generate ./dist/schematics:feature minha-feature

📁 Estrutura do Projeto

angular-schematics-demo/
├── schematics/                  # Código fonte das schematics
│   ├── feature/                 # Schematic de feature
│   │   ├── index.ts            # Lógica da schematic
│   │   ├── schema.json         # Schema de validação
│   │   └── files/              # Templates dos arquivos
│   ├── tsconfig.json           # Config TypeScript
│   └── collection.json         # Configuração das schematics
├── dist/schematics/            # Schematics compiladas
├── scripts/                    # Scripts de build
│   ├── build.js               # Build logic
│   ├── clean.js               # Limpeza de compilação
│   └── copy-files.js          # Cópia de templates
├── src/
│   └── app/
│       ├── features/          # Features geradas
│       └── app.routes.ts      # Rotas da aplicação
└── package.json

🛠 Scripts Disponíveis

# Compilar schematics
npm run schematics:build

# Desenvolvimento
npm start                      # Iniciar dev server
npm run build                  # Build da aplicação
npm test                       # Executar testes

📝 Customização

Para modificar a estrutura gerada:

1. Editar templates em schematics/feature/files/
2. Atualizar schema em schematics/feature/schema.json para adicionar novas opções
3. Modificar lógica em schematics/feature/index.ts
4. Recompilar: npm run schematics:build

🔧 Publicar em npm (Opcional)

Para publicar sua schematic em npm:

1. Atualizar package.json com seu nome e descrição
2. Compilar: npm run schematics:build
3. Publicar: npm publish
4. Usar em outro projeto: ng add seu-pacote

📚 Recursos

• Angular Schematics Documentation
• Angular DevKit
• Angular CLI

📄 Licença

MIT

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.