Alvaro Camillo Neto
Desenvolvedor há 15 anos, atualmente trabalhando com tecnologias web e open source. Estudando e compartilhando o máximo possível.
npm install -g @angular/cli
ng new
ng serve
ng build
ng generate (ng g )
component
service
pipe
guard
...
Como?
Schematics
npm i -g @angular-devkit/schematics-cli
schematics schematic --name exemplo
schematics blank --name meuSchematic
{
"$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
"schematics": {
"meu-schematic": {
"description": "Exemplo de um Schematic",
"factory": "./meu-schematic/index#meuSchematic",
"schema": "./meu-schematic/parametros.json"
}
}
}
{
"$schema": "http://json-schema.org/schema",
"id": "MeuSchematic",
"title": "Parâmetros do Schematic",
"type": "object",
"description": "Exemplo Schematic",
"properties": {
"nome": {
"type": "string",
"description": "Nome do serviço",
"$default": {
"$source": "argv",
"index": 0
},
"x-prompt": "Qual é o nome do serviço que você quer criar?"
}
},
"required": ["nome"]
}
import { strings } from '@angular-devkit/core';
import { apply, mergeWith, Rule} from '@angular-devkit/schematics';
import { SchematicContext, template, Tree, url } from '@angular-devkit/schematics';
import { Parametros } from './parametros.d';
export function meuSchematic(_options: Parametros): Rule {
return (tree: Tree, _context: SchematicContext) => {
const sourceTemplates = url('./files');
const sourceParametrizedTemplates = apply(sourceTemplates, [
template({
..._options,
...strings
})
]);
return mergeWith(sourceParametrizedTemplates)(tree, _context);
};
}
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
const API_URL = '/api/<%= dasherize(nome) %>';
@Injectable({providedIn: 'root'})
export class <%= classify(nome) %>CrudResourceService{
constructor(private httpClient: HttpClient){}
findAll():Observable<any>[]{
return this.httpClient.get<any>(API_URL);
}
}
npm run build
schematics .:meu-schematic --debug=false
By Alvaro Camillo Neto
Você ou sua equipe costumam escrever a mesma estrutura básica de componente angular para todo projeto? Adiciona a mesma biblioteca que possui vários passos para implementar? Criou uma biblioteca Angular e gostaria de facilitar a sua instalação? Vamos conhecer o Angular Schematic uma ferramenta que permite você criar scripts que manipulam ou adicionam arquivos no seu projeto Angular!
Desenvolvedor há 15 anos, atualmente trabalhando com tecnologias web e open source. Estudando e compartilhando o máximo possível.