Configurando o ambiente com webpack

Ao concluir esta sessão o leitor estará apto a contruir um ambiente mais adequado ao desenvolvimento de
aplicações Angular 2 utilizando as facilidades oferecidas pela ferramenta Webpack

Um aspecto importante no desenvolvimento de aplicações Angular 2 e pouco explorado nos tutoriais e treinamentos no
framework está relacionado a construção e configuração do ambiente para a execução da aplicação. Em geral os
projetos são iniciados a partir de download das configurações básicas contendo as dependências necessárias
a execução da aplicação. Nesta sessão pretende-se oferecer ao leitor uma compreensão sobre a arquitetura
utilizada pelo framework buscando oferecer conhecimentos importantes para a construção de produtos de
melhor qualidade além de favorecer o entendimento dos mecanismos utilizados.

Criar uma pasta para o projeto contendo o subdiretorio src/app

mkdir -p exemplo/src/app
cd exemplo

Criar o arquivo de configuração da aplicação com o nome package.json, que fornece as informações de
dependências do projeto além de scripts de execução do npm, com o comando

npm init -f

Isso vai criar o arquivo que gerencia as dependências do projeto, package.json com o seguinte conteúdo:

{
  "name": "testeTreinameno",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Inserir as dependências do Angular no arquivo e instala-las:

npm install @angular/common @angular/compiler @angular/core @angular/forms @angular/http @angular/platform-browser @angular/platform-browser-dynamic @angular/router core-js rxjs zone.js --save

Isso vai instalar as bibliotecas na pasta node_modules. O parâmetro --save vai colocar essas bibliotecas como dependência do projeto no arquivo package.json. Desse modo você não precisa guardar os módulos quando for armazenar o projeto no seu servidor onde há o gerenciador de versões. Quem baixar o projeto deverá execurar npm install, que por sua vez vai baixar os módulos npm conforme descrito no arquivo package.json.

Para instalar o transpilador, ferramenta que faz a conversão de uma linguagem para outra, da linguagem Typescript para Javascript
é necessário instalar a ferramenta typescript na sessão que mantem as informações das dependências para o ambiente de
desenvolvimento no arquivo package.json com o comando

npm install typescript typings --save-dev

Note o parâmetro --save-dev ao invés de --save. Isso vai colocar o módulo instalado em node_modules como dependência de desenvolvimento no package.json. Isso significa que o seu projeto precisa desse pacote para rodar durante o desenvolvimento, mas se você decidir tornar o projeto um módulo que possa ser instalado em outros projetos, esse módulo gerado não vai baixar as dependências de desenvolvimento quando for instalado.

Para garantir a validação de tipos em módulos desenvolvidos em Javascript é necessário o uso de uma ferramenta para
evitar problemas com o compilador typescript, para isso a demanda do uso da ferramenta typings.

npm install typings --save-dev

Para o uso no ambiente de desenvolvimento é recomendada a adoção de um servidor http capaz de processar os programas em
typescript sem a necessidade de uma nova compilação a cada alteração. Tal servidor fica monitorando o diretório do seu projeto por alterações, e atualiza a página do seu projeto em tempo real. Como recomendamos o uso do webpack como gerenciador de dependências de projeto, vamos instalar o servidor do webpack:

npm install webpack webpack-dev-server --save-dev

Para o correto funcionamento do Webpack é necessário que sejam instalados alguns complementos que fazem o processamento
de arquivos utilizados em aplicações web

npm install angular2-template-loader awesome-typescript-loader css-loader file-loader html-loader null-loader raw-loader style-loader to-string-loader --save-dev

Existem também plugins para o Webpack que fornecem funcionalidades que simplificam o processo de execução de aplicações
web em ambiente de desenvolvimento que podem ser instalados com o comando:

npm install html-webpack-plugin webpack-merge extract-text-webpack-plugin --save-dev

Apenas para facilitar o processo de exclusão de arquivos também será instaldo o módulo rimraf:

npm install rimraf --save-dev

Para uma organização padronizada dos arquivos de projetos Angular, este tutorial propõe a criação da seguinte estrutura de pastas:

src -- app --- assets ---- css ---- images

Para o uso da linguagem Typescript em conjunto com Javascript é necessário realizar algumas configurações que agregam
funcionalidades a ferramenta de transpilação. Uma maneira de realizar esta configuração é por meio dos seguintes comandos

typings install dt~core-js --save --global
typings install dt~node --save --global

Após suas execuções será criado o arquivo typings.json na pasta onde os comandos foram executados.

Para instalar os pacotes execute o comando

typings install

Configurando o Webpack

A execução da aplicação em ambiente de desenvolvimento depende de configurações do servidor Webpack. O arquivo
vendor.ts é utilizado para para importar os arquivos das dependências para a aplicação. Este arquivo deve
ser criado na pasta src com um conteúdo semelhante ao seguinte:

import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
import 'rxjs';

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
if (process.env.ENV === 'production') {
    // Production
} else {
   // Development
   Error['stackTraceLimit'] = Infinity;
   require('zone.js/dist/long-stack-trace-zone');
}

Para as configurações flexiveis do Webpack crie na pasta raiz o arquivo webpack.config.js, com o seguinte conteúdo

module.exports = require('./config/webpack.dev.js');

em seguida deve ser criado o diretório config onde serão mantidos os arquivos webpack.dev.js e webpack.common.js que
definirão o comportamento do servidor http.

Em webpack.common.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

const path = require('path');
const rootDir = path.resolve(__dirname, '..');

module.exports = {
entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
},

resolve: {
    extensions: ['.js', '.ts', '.json']
},

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
        },
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file?name=assets/[name].[hash].[ext]'
        },
        {
           test: /\.css$/,
           loaders: ['to-string-loader', 'css-loader']
        }
    ]},

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

Em webpack.dev.js:

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');

const path = require('path');
const rootDir = path.resolve(__dirname, '..');

module.exports = webpackMerge(commonConfig, {

devtool: 'cheap-module-eval-source-map',

output: {
    path: path.resolve(rootDir, 'dist'),
    publicPath: 'http://localhost:7070/',
    filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

    plugins: [
        new ExtractTextPlugin('[name].css')
    ],

    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
});

Construindo uma aplicação básica

Crie o arquivo main.ts na pasta src

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

Este arquivo faz referência ao app.module.ts que deve ser criado na pasta app

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

O aquivo que contém as funcionalidades do componente, app.component.ts também fica na pasta app

import { Component } from '@angular/core';
import '../assets/css/styles.css';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent { }

Nele são apresentadas as dependencias de um arquivo html e outro css que contém o seguinte
conteúdo

Em app.component.html

<main>
    <h1>Hello from Angular Application with Webpack</h1>
</main>

e app.component.css

main {
    padding: 1em;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-top: 50px;
    display: block;
}

Finalmente o arquivo html de inicio da aplicação index.html que deve ser criado na pasta src

<!DOCTYPE html>
<html>
<head>
    <title>Angular With Webpack</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

Insira os scripts para a execução do servidor no arquivo package.json

"scripts": {
    "start": "webpack-dev-server --inline --progress --port 7070",
    "postinstall": "typings install"
},

Para a traspilação é necessário realizar a configuração de alguns parâmetros que pode ser feito por meio da
criação e edição do arquivo tsconfig.json com o seguinte conteúdo

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    }
}

Para testar a aplicação use o comando

npm start

No endereço local da sua máquina na porta 7070, http://localhost:7070, estará disponível a aplicação criada.

Webpack

Configurando o ambiente com webpack

Configurando o Webpack

Construindo uma aplicação básica

Trabalhando com formulários

Conceitos de webservice

Integrando aplicação Angular 2 com webservices

Sobre o framework Demoiselle

Criando um webservice com Demoiselle 3

Demoiselle 3 e persistência

Implementando os módulos http e security do Demoiselle 3

O gerador de código (Angular 2 e Java) Demoiselle 3

Referências

results matching ""

No results matching ""