Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

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!