O objetivo dessa aula é demonstrar um template de projeto Angular 2 utilizando o Webpack.
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):
1 | npm install |
Para validar o código fonte usando o TS Lint execute:
1 | npm run lint |
Para executar os testes digite no terminal:
1 | npm run test |
Para executar os testes de integração execute:
1 | npm run e2e |
Para executar a aplicação execute:
1 | npm start |
Para gerar um novo módulo de CRUD
1 | npm run crud |
Para gerar a versão otimizada para produção execute:
1 | npm run build |
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.
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 ?
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.
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.
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.
Funcionando perfeito professor !
Obrigado!
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.
Parece ser relacionado com o gerador de path de destino no Windows, irei verificar e publicar a correção!
Como faço pra importar um arquivo javascript ou um css no webpack?
Exemplos charts.js?
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.