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 entendê-lo 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:

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 --collection=@custom/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.

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 o 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:

{
  "name": "<%= utils.dasherize(name) %>",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "generate-docs": "compodoc -p src/tsconfig.app.json",
    "serve-docs": "compodoc -s src/tsconfig.app.json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",<% if (serviceWorker) { %>
    "@angular/service-worker": "^5.0.0",<% } %>
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "<%= version %>",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",<% if (!minimal) { %>
    "@compodoc/compodoc": "^1.0.5",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",<% } %>
    "typescript": "~2.4.2"
  }
}

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

ng new --collection=@custom/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 serve–docs 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

• Angular devkit: https://github.com/angular/devkit
• Schematics: https://github.com/angular/angular-cli/issues/7627
• Angular schematics: https://www.npmjs.com/package/@angular-devkit/schematics