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. ;)