Digievoluindo uma angular app para ANDROID APP

Nesse artigo veremos como transformar nossa angular app em um app para android, ou seja vamos gerar o .apk.

Para tanto precisamos ter instalado:

• NodeJS (https://nodejs.org/en/) (https://github.com/creationix/nvm)
• Cordova CLI ( npm install -g cordova )
• Angular CLI ( npm install -g @angular/cli )
• Ambiente android configurado ( https://cordova.apache.org/docs/en/latest/guide/platforms/android/ )

Vamos primeiramente criar nossa aplicação angular:

ng new meu-app-legal

Logo após toda a instalação ser concluída, vamos criar nossa aplicação cordova que vai servir como modelo:

cordova create meuApp com.example.meuapp MeuAppLegal

cordova platform add android

Agora vamos mesclar os dois projetos. Usando como base o projeto angular. Copie todo conteúdo do diretório do projeto cordova, para dentro da pasta do projeto angular, com exceção da pasta node_modules/, package.json e do package-lock.json.

Agora vamos juntar os package.json’s dos dois projetos, o meu ficou assim:

Se tudo estiver ok, precisamos ainda mesclar as dependências, para isso vamos executar:

npm install

Após a execução podemos observar que nossa app web ainda funciona normalmente:

ng serve

Pronto, tudo funcionando, precisamos abrir o index.html que se encontra na raiz da pasta src/. e vamos adicionar a referência ao cordova em nosso projeto. E mudaremos também a base de referência somente adicionando um ponto a frente da barra.

No terminal, precisaremos adicionar um plugin:

cordova plugin add cordova-plugin-device

Você pode adicionar qualquer outro plugin posteriormente.

Agora precisaremos alterar a classe principal da aplicação, abriremos o arquivo app.component.ts que se encontrar em src/app.

Primeiramente importamos a classe OnInit, e em seguida implementamos ela em nossa classe AppComponent. Precisamos implementar o método ngOnInit para buscar as informações do dispositivo. No qual a nossa classe fica assim:

Agora já podemos começar o processo de build da aplicação. Primeiramente precisamos gerar o build do angular, e para isso o CLI nos disponibiliza ng build, entretanto o local padrão de build do angular é dentro da pasta dist/{nomeDaApp} e o do cordova é na pasta www/.

Para resolver isso temos duas formas, a primeira e menos aconselhável seria alterar o angular.json e trocar o outputPath de “dist/{nomeDaApp}” para “www”.

Ou podemos simplesmente explicitar o local de destino do build na hora de executar o comando ng buid usando a flag — output-path.

Então vamos lá:

ng build — output-path www

Após finalizar esse build do angular, se tudo ocorreu bem, podemos facilmente executar o comando abaixo para criar o apk.

cordova build android

Quando terminar o build ele entrega o caminho onde o apk se encontra, podemos instalar em um dispositivo e voilà. Nosso site criado com agular agora é um app android. :)

E para finalizar, podemos criar um script no package.json com esses comandos acima para facilitar o processo de build, ficaria mais ou menos assim:

Após isso, basta executar:

npm run build-android

Bom é isso.

Até mais. ;)