Migrando uma Aplicação AngularJS para Angular com Webpack #1

Jaime Neves
Sep 5, 2018 · 4 min read

Após um longo tempo usando aplicação AngularJS decidimos migrar nossa aplicação para o Angular (nome dado à todas as versão após 1.x). Não irei citar o que nós levou a tomar essa decisão, pois não é o nosso foco, quem sabe deixo isso para um outro post.
Para um entendimento mas eficaz da migração com todos seus componentes, é importante que você já tenha uma noção de ES6, Webpapck e TypeScript, que serão ferramentas chaves da nossa migração. No final do post tem alguns links sobre as ferramentas.

Antes de colocar a mão na massa acho super importante citar aqui o que eu vir na documentação oficial, onde te ajuda na migração da aplicação. Bom, trocando em miúdos, lá diz: “Aplicações AngularJS são ótimas, sempre considerar se há realmente a necessidade da migração”.

Não irei colocar aqui a aplicação da empresa, a qual nós fizemos toda a migração, mas criei uma aplicação simples para irmos adicionando complexidade e funcionalidades, conforme avançamos para outros posts.

Preparando a Aplicação.

Existem muitas maneiras de estruturar aplicações AngularJS, mas antes de iniciar a migração você deverá padronizá-la, regra essa ditado pelo próprio time do Angular e citado na documentação. Para isso você pode seguir [este guia]. Desde o início do projeto nós vinhamos seguindo este [outro guia], então pulamos essa etapa, pois nossa aplicação já estava com um padrão de código exigido para a migração.

Para as etapas seguintes é preciso que sua aplicação já esteja padronizada, ou se preferir, pode seguir em frente para entender todo o conceito da migração, pois iremos usar nossa aplicação como exemplo.

Como já citamos acima iremos começar com uma aplicação básica e iremos avançando com os componentes e funcionalidades nos próximos posts.

Essa é a estrutura básica da aplicação a qual iremos fazer a migração.

repositório no GitHub [app-angularjs-example].

Nossa Missão

Nossa primeira missão será converter a nossa aplicação para TypeScript, ou seja, após o termino desse post a nossa aplicação AngularJS ainda não será em sua íntegra Angular, será uma aplicação AngularJS usando TypeScript. Precisamos configurar um module loader, para que a nossa aplicação tenha suporte para sistemas de módulos do TypeScript. Com isso poderemos usar as features `import` e `export` para compartilhar códigos em diferentes partes da aplicação.

Etapa 1: Alterando os Arquivos e Diretórios.

Primeiro alterei todos os meus arquivos para TypeScript, ou seja, eu simplesmente troquei a extensão dos arquivos de .js para .ts. E no nosso caso, vamos também renomear o diretório scripts para src e mover o diretório pages para dentro de src .

No final a estrutura de pastas ficará da seguinte forma.

Etapa 2: Configurando o Webpack.

Crie um arquivo chamado webpack.config.js na raiz do projeto, e copie o conteúdo abaixo para o arquivo.

Copie o conteúdo abaixo para o arquivo package.json.

execute npm install, para instalar todas as dependências do arquivo.

Etapa 3: Usando o tsconfig.json

Após a instalação das dependências, crie um arquivo na raiz no projeto chamado tsconfig.json, e copie o conteúdo abaixo para o arquivo.

A presença de um arquivo tsconfig.json no root de seu diretório indica que é um projeto TypeScript. Para mais informações visite.

Após a criação e configuração dos arquivos e diretórios o projeto ficará com a seguinte estrutura:

Etapa 4: Alterando o conteúdo dos arquivos TypeScript.

Arquivo index.ts.

O arquivo index.ts é o nosso arquivo de ponto de entrada (entry point), ele chama todos os outros módulos e componentes da aplicação. No momento ele está apenas importando a classe de rotas que são definidas no arquivo migration1-route.ts.

Arquivo route.ts.

Etapa 5: Executando a Aplicação.

Altere os scripts do arquivo index.html.

Para executar a aplicação execute o seguinte comando.

$ npm run start:dev

Código completo [app-angularjs-migration], vá para a branch [step-1].

Até o próximo post…

Link Úteis

ES6:
https://medium.com/@matheusml/o-guia-do-es6-tudo-que-voc%C3%AA-precisa-saber-8c287876325f

Webpack:
https://devheroes.io/webpack-2-para-iniciantes-o-que-e-porque-usar-e-como-iniciar/
https://medium.com/tableless/introdu%C3%A7%C3%A3o-ao-webpack-2-39e4c97d5b8c

Jaime Neves

Written by

Front End Engineer — Reclame Aqui

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade