Solucionado (ver solução)
Solucionado
(ver solução)
10
respostas

Erro ao executar projeto Ionic no Windows e no Ubuntu

Olá Estou desenvolvendo uma aplicação em Ionic2. Eu uso Windows e meu companheiro usa ubuntu. No Windows funciona, pois foi onde criei, porem ao subir aplicação com ionic serve --lab no ubuntu está apresentando o seguinte erro:

> ionic-hello-world@0.0.0 ionic:serve /home/fabricio/htdocs/caronelas
> ionic-app-scripts serve "--v2" "--lab" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"

sh: 1: ionic-app-scripts: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! ionic-hello-world@0.0.0 ionic:serve: ionic-app-scripts serve "--v2" "--lab" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the ionic-hello-world@0.0.0 ionic:serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/fabricio/.npm/_logs/2017-10-17T01_47_44_375Z-debug.log
There was an error serving your Ionic application: There was an error with the spawned command: serve

Alguém tem alguma ideia de como resolver?

10 respostas

Boa noite, Gustavo! Como vai?

A aplicação é em Ionic 2, mesmo? A pergunta se faz necessária pq já está disponível a versão 3 do framework.

Outra coisa, qual a versão da Ionic CLI que está instalada nos PCs? Rode o comando ionic info no terminal do Linux e no prompt do Windows e mande aqui a saída.

Feito isso, veremos melhor o que pode ser.

Aguardo o seu retorno!

Abraço, Gabriel Leite

WINDOWS

 ordova CLI: 7.1.0
Ionic Framework Version: 3.7.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 3.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.11.4
Xcode version: Not installed

UBUNTU

 ordova CLI: 6.5.0
Ionic Framework Version: 2.2.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.10
Node Version: v8.5.0
Xcode version: Not installed

Boa noite, Gustavo!

O problema está acontecendo pq, como vc pode observar pelo log que vc envio, as versões do Ionic que estão rodando nas máquinas é diferente.

No Windows (onde vc criou o projeto) a versão do Ionic é 3.7.1. Já no Ubuntu, a versão que está sendo utilizada é a 2.2.1. Sendo que a versão 3 do Ionic incluiu uma série de melhorias referentes ao build do projeto.

Além disso, como vc disse que o projeto foi criado no Windows, se tudo estiver correto, a versão do projeto é a mesma do Ionci que está instalado nessa máquina (3.7.1).

A solução mais simples seria, no Ubuntu, após instalar as dependências do projeto com npm install, executar o comando npm run ionic:serve. ATENÇÃO: ambos os comando deverão ser executados dentro da pasta do projeto.

Uma vez que o build tenha terminado, vc poderá acessar a url http://localhost:8100/ionic-lab para ver o projeto funcionando normalmente.

Uma solução mais completa seria baixar o Ionic mais novo (nas duas máquinas) e criar o projeto por ele (usando Node 6.X, tá?). Esse projeto estará em Ionic 3 e não o Ionic 2. Depois, vc pode consultar o guia de migração que o professor Flávio elaborou na parte 2 do curso de Ionic que ele ministrou.

https://cursos.alura.com.br/course/ionic2-parte2/task/26627

Minha indicação é vc seguir a primeira opção que te dei e só tentar seguir essa segunda opção em último caso pq ela irá ter um impacto maior.

Qualquer dúvida é só falar!

Grande abraço,

Gabriel Leite.

Rodei o install e o run dentro da pasta do projeto

a saída foi a seguinte

fabricio@fabricio-pc:~/htdocs/caronelas$ sudo npm run ionic:serve
sudo: não foi possível resolver máquina fabricio-pc

> ionic-hello-world@0.0.0 ionic:serve /home/fabricio/htdocs/caronelas
> ionic-app-scripts serve

sh: 1: ionic-app-scripts: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! ionic-hello-world@0.0.0 ionic:serve: ionic-app-scripts serve
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the ionic-hello-world@0.0.0 ionic:serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/fabricio/.npm/_logs/2017-10-18T01_05_37_038Z-debug.log
fabricio@fabricio-pc:~/htdocs/caronelas$ cat /home/fabricio/.npm/_logs/2017-10-18T01_05_37_038Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'ionic:serve' ]
2 info using npm@5.3.0
3 info using node@v8.5.0
4 verbose run-script [ 'preionic:serve', 'ionic:serve', 'postionic:serve' ]
5 info lifecycle ionic-hello-world@0.0.0~preionic:serve: ionic-hello-world@0.0.0
6 info lifecycle ionic-hello-world@0.0.0~ionic:serve: ionic-hello-world@0.0.0
7 verbose lifecycle ionic-hello-world@0.0.0~ionic:serve: unsafe-perm in lifecycle true
8 verbose lifecycle ionic-hello-world@0.0.0~ionic:serve: PATH: /usr/lib/node_modules/npm/bin/node-gyp-bin:/home/fabricio/htdocs/caronelas/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/snap/bin
9 verbose lifecycle ionic-hello-world@0.0.0~ionic:serve: CWD: /home/fabricio/htdocs/caronelas
10 silly lifecycle ionic-hello-world@0.0.0~ionic:serve: Args: [ '-c', 'ionic-app-scripts serve' ]
11 info lifecycle ionic-hello-world@0.0.0~ionic:serve: Failed to exec ionic:serve script
12 verbose stack Error: ionic-hello-world@0.0.0 ionic:serve: ionic-app-scripts serve
12 verbose stack spawn ENOENT
12 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/lib/utils/spawn.js:33:16)
12 verbose stack     at emitTwo (events.js:125:13)
12 verbose stack     at ChildProcess.emit (events.js:213:7)
12 verbose stack     at maybeClose (internal/child_process.js:927:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
13 verbose pkgid ionic-hello-world@0.0.0
14 verbose cwd /home/fabricio/htdocs/caronelas
15 verbose Linux 4.10.0-35-generic
16 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "ionic:serve"
17 verbose node v8.5.0
18 verbose npm  v5.3.0
19 error file sh
20 error code ELIFECYCLE
21 error errno ENOENT
22 error syscall spawn
23 error ionic-hello-world@0.0.0 ionic:serve: ionic-app-scripts serve
23 error spawn ENOENT
24 error Failed at the ionic-hello-world@0.0.0 ionic:serve script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

Cole aqui, por favor, o package.json do projeto.

./package.json

{
  "name": "ionic-hello-world",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.4.3",
    "@angular/compiler": "4.4.3",
    "@angular/compiler-cli": "4.4.3",
    "@angular/core": "4.4.3",
    "@angular/forms": "4.4.3",
    "@angular/http": "4.4.3",
    "@angular/platform-browser": "4.4.3",
    "@angular/platform-browser-dynamic": "4.4.3",
    "@ionic-native/core": "4.3.0",
    "@ionic-native/facebook": "^4.3.1",

    "@ionic-native/splash-screen": "4.3.0",
    "@ionic-native/status-bar": "4.3.0",
    "@ionic/storage": "2.0.1",
    "angularfire2": "^5.0.0-rc.2",
    "firebase": "^4.5.0",
    "ionic-angular": "3.7.1",
    "ionicons": "3.0.0",
    "promise-polyfill": "^6.0.2",
    "rxjs": "5.4.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.0.0",
    "typescript": "2.3.4"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-splashscreen",
    {
      "locator": "https://github.com/apache/cordova-plugin-statusbar.git",
      "id": "cordova-plugin-statusbar"
    },
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "caronelasApp: An Ionic project"
}

Muito bem!

Boa notícia 1: De acordo com o package.json do seu projeto, ele já foi criado usando todas as dependências mais novas do Ionic. Ou seja, seu projeto realmente é Ionic 3, tanto isso é verdade que a versão do ionic-angular está com valor 3.7.1, a mais atual possível!

Boa notícia 2 (Opcional): Já que seu projeto já foi criado as dependências mais novas, que tal atualizar o seu ambiente de desenvolvimento? Para isso, faça o seguinte:

  1. Execute npm uninstall -g ionic cordova. Isso irá desinstalar tanto o ionic quanto o cordova.

  2. Execute npm install -g cordova ionic@latest para instalar de forma global a versão mais nova do Ionic. Inclusive, depois da instalação vc pode executar novamente o ionic info para verificar que os valores estarão atualizados em relação aos valores anteriores que vc colocou aqui no tópico.

Obs. 1: Execute esses comandos tanto no Ubuntu quanto no Windows para ambos ficarem com o mesmo ambiente de desenvolvimento.

Obs. 2: Esses comandos podem requerer privilégios de administrador. Então tanto no Ubuntu quanto no Windows, certifique-se de ter esse privilégio caso seja necessário.

Obs. 3: Embora eu tenha colocado como opcional, executar essa atualização do ambiente de desenvolvimento é altamente indicado. Isso pq o Ionic vai atualizando as versões e as coisas mais novas não funcionam se vc estiver utilizando um ambiente de desenvolvimento mais antigo (como é o caso do Ubuntu). E o caso inverso também costuma acontecer! Então, sempre que estiver desenvolvendo em Ionic usando máquinas diferentes, procure estar com o mesmo ambiente de desenvolvimento em todas elas.

Aparentemente, o npm está se atrapalhando com as dependências do projeto. Então, no Ubuntu, faça o seguinte:

  1. Exclua a pasta node_modules.

  2. Após excluir, execute npm install dentro da pasta do projeto. Nessa parte não será necessário utilizar privilégios de administrador.

  3. Se vc tiver atualizado o ambiente de desenvolvimento, para executar o projeto, faça ionic serve --lab ou a opção mais curta ionic serve -l. Caso não tenha atualizado o ambiente, devido ao problema explicado anteriormente em relação à diferença das versões, utilize npm run ionic:serve. Lembrando que, qualquer que seja o caso, vc deverá estar dentro da pasta do projeto e que nessa parte não será necessário utilizar privilégios de administrador.

solução!

Em tempo:

Nunca transporte a pasta node_modules entre máquinas diferentes. Como nela estará a compilação de todas as dependências do seu projeto de acordo com o SO que o usuário está utilizando, é obrigatório a utilização do npm install para que o npm possa instalar as dependências corretamente e não acabar se embananando sozinho.

OOPA. Desculpe a demora. Os dias estão corridos por aqui. Cheguei nessa versão no UBUNTU

Cordova CLI: 7.1.0 
Ionic Framework Version: 3.7.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 3.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.10
Node Version: v8.5.0
Xcode version: Not installed

Exclui o node modules e rodei npm install novamente. Tudo ok!

Entretanto, ionic serve --lab ainda encontra problemas

> ionic-hello-world@0.0.0 ionic:serve /home/fabricio/htdocs/caronelas
> ionic-app-scripts serve "--v2" "undefined" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"

module.js:529
    throw err;
    ^

Error: Cannot find module '@angular/tsc-wrapped/src/tsc'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/fabricio/htdocs/caronelas/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:6:13)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ionic-hello-world@0.0.0 ionic:serve: `ionic-app-scripts serve "--v2" "undefined" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the ionic-hello-world@0.0.0 ionic:serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2017-10-20T02_35_19_033Z-debug.log
There was an error serving your Ionic application: There was an error with the spawned command: serve

Agora a pouco resolvi igualar versoes do node. Afinal, seu conselho estava certo. Muito muito obrigado pela ajuda. Abraço!