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

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:devCó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
