Angular 2 – Template de projeto com Webpack

Curso básico gratuito de Angular 2 | kazale.comO objetivo dessa aula é demonstrar um template de projeto Angular 2 utilizando o Webpack.

 

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você aprenderá como utilizar o template de projeto Angular 2 com Webpack desenvolvido pela Kazale.com, que seguem as recomendações da equipe de desenvolvimento do Angular 2.



1. O que é o template de projeto Angular 2 com Webpack?

O template de projeto Angular 2 com Webpack contém o código necessário para servir como base para a criação de uma aplicação profissional e otimizada para produção em Angular 2.

O Angular 2 demanda uma série de ferramentas auxiliares para contribuir com o desenvolvimento de uma aplicação complexa, que incluem ferramentas para testes unitários, verificação de código fonte, build e otimização de código, entre outras.

Esse projeto visa unir e disponibilizar todas essas ferramentas juntas, configuradas e pronto para utilização.

Todos os recursos apresentados seguem os padrões recomendados pela própria equipe de desenvolvimento do Angular 2.

A seguir será abordado cada ferramenta utilizada no template, porém de modo superficial, cada uma delas será estudada posteriormente em outros artigos e cursos que serão disponibilizados.

2. Webpack

O Webpack é um “module bundler”, mas o que isso significa?

O código Angular 2 é escrito usando Typescript, e muitas vezes utilizando recursos ES5 ou ES6, que não são suportados pelos navegadores. Devido a isso precisamos de alguma forma converter todo esse código para um formato que os navegadores entendam, e é isso que o Webpack faz!

O Webpack converte o código da aplicação para um formato que possa ser interpretado pelos navegadores, o que chamamos de “module bundler”

Porém ele pode ir além e otimizar o código através de plugins, que por sua vez minificam os arquivos, concatenam arquivos em um só, além de outros recursos que possam ser aplicados.

3. TS Lint

O TS Lint é uma ferramenta utilizada para validar se o código fonte está escrito seguindo alguns padrões definidos.

É uma ferramenta opcional porém bastante útil, pois ajuda a manter um código padronizado, de maior qualidade, e com menos erros.

4. Testes unitários com Jasmine e Karma

Nos dias atuais testes unitários são imprescindíveis e devem ser escritos para todo o código escrito.

Só existem vantagens em se manter um código com boa cobertura de testes, entre elas:

  • Código mais confiável
  • Código menos acoplado
  • Código com menos erros (bugs)
  • Maior segurança ao adicionar novas implementações

O Angular 2 utiliza os frameworks Jasmine e Karma para a criação de testes unitários.

5. Testes de integração (e2e) com Protractor

Os testes de integração simular um usuário acessando o sistema, e são importantes para validação da interface e navegação em uma aplicação.

O Angular 2 utiliza o framework Protractor para a realização de testes de integração.

6. Integração contínua (CI) com Travis CI

A integração contínua (CI) serve para executar o build e testes de uma aplicação assim que um novo commit é realizado.

O projeto já inclui a configuração de execução utilizando o Travis CI, que se integra com o GitHub.

Basicamente quando um novo commit é realizado, o Travis CI lê o arquivo ‘.travis.yml’ e a partir dele segue as instruções de build da aplicação, que no mínimo incluirá a execução dos testes unitários, podendo até mesmo realizar o deploy de uma aplicação em produção.

7. Gerador de códigos CRUD

Para facilitar o desenvolvimento e tornar a implementação mas dinâmica, um gerador de CRUDs está presente no templates.

Através da execução do assistente, executado via terminal, é possível criar a estrutura básica de um novo módulo, como um módulo de cadastro de clientes por exemplo.

8. Passos para utilização

O repositório oficial do código fonte é https://github.com/m4rciosouza/kz-angular2-webpack-template.

Para baixar as dependências digite no terminal (NodeJS deve estar instalado):

Para validar o código fonte usando o TS Lint execute:

Para executar os testes digite no terminal:

Para executar os testes de integração execute:

Para executar a aplicação execute:

Para gerar um novo módulo de CRUD

Para gerar a versão otimizada para produção execute:

9. Filtros e diretivas para mercado brasileiro

Como um extra o template também inclui filtros e diretivas específicas para o mercado brasileiro, para formatação e validação de nossos documentos, tais recursos incluem:

  • Formatação de CEP
  • Formatação de CPF
  • Formatação de CNPJ
  • Validação de CPF
  • Validação de CNPJ

Ao iniciar a aplicação basta clicar em “Demo” no menu superior para visualizar e aprender como utilizar todos os recursos extras.

10. Conclusão

Conforme foi possível verificar, esse template é a melhor opção para se iniciar uma aplicação Angular 2, pois ela inclui a última versão do Angular 2, uma série de recursos para a criação de uma aplicação profissional em Angular 2, assim como recursos extras específicos para o padrão brasileiro.

10 comentários em “Angular 2 – Template de projeto com Webpack

  1. boa tarde.
    quando rodo o npm install da o erro abaixo:
    2363 error node v6.9.2
    2364 error npm v3.10.9
    2365 error code ETARGET
    2366 error notarget No compatible version found: @types/node@^6.9.2
    2366 error notarget Valid install targets:
    2366 error notarget 7.0.0, 6.0.60, 6.0.59, 6.0.58, 6.0.57, 6.0.56, 6.0.55, 6.0.54, 6.0.53, 6.0.52, 6.0.51, 6.0.50, 6.0.49, 6.0.48, 6.0.47, 6.0.46, 6.0.45, 6.0.44, 6.0.43, 6.0.42, 6.0.41, 6.0.40, 6.0.39, 6.0.38, 6.0.37, 6.0.36, 6.0.35, 6.0.34, 6.0.33, 6.0.32, 6.0.31, 4.2.0, 4.0.30, 4.0.29, 4.0.28-alpha, 4.0.27-alpha, 4.0.26-alpha, 4.0.25-alpha, 4.0.24-alpha, 4.0.23-alpha, 4.0.22-alpha, 4.0.21-alpha, 4.0.16-alpha, 4.0.15-alpha, 0.12.0, 0.0.3, 0.0.2, 0.0.1, 0.0.0
    2367 error notarget This is most likely not a problem with npm itself.
    2367 error notarget In most cases you or one of your dependencies are requesting
    2367 error notarget a package version that doesn’t exist.
    2367 error notarget
    2367 error notarget It was specified as a dependency of ‘angular-quickstart’
    2368 verbose exit [ 1, true ]

    o que devo fazer para corrigir esse erro ?

    1. Olá Claudemir, pela mensagem de erro parece que você está utilizando uma versão antiga do NodeJS, uma das dependências exige a versão 6.9.2 ou superior do NodeJS.

      Verifique a versão digitando no terminal: ‘node –version’, e caso ela seja anterior a 6.9.2 baixe a última versão do Node, eu atualmente uso a 7.2.1.

  2. Boa tarde, o scaffolding não esta funcionando, quando peço pra criar ele cria normalmente, mas o que ele faz é renomear os arquivo da pasta source da pasta scaffolding.

    1. Olá Evandro,

      que estranho, o crud usa como base os arquivos contidos em scaffolding, mas ele faz as alterações necessárias para o novo formato dentro do diretório src/app.

      Após isso é necessário registrar os componentes para que eles sejam carregados na aplicação, talvez você tenha esquecido de fazer essa configuração.

  3. KAZALE IT

    Boa noite,

    No meu caso aconteceu a mesma coisa que o Evandro,
    Usei o comando npm run crud grupo. Foram gerados os arquivos, mas ficaram dentro da pasta scaffolding/source.
    Para solução seria só criar a pasta no diretório src/app e copiar os arquivos criados na pasta scaffolding/source para esta pasta. Depois desta movimentação configurar as rotas.

    1. Se estiver utilizando o template aqui da Kazale, faça a importação dos arquivos em ‘src/vendor.ts’. Nesse arquivo existem outras libs importadas que servem como referência.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

2 × 3 =