2

Estoy aprendiendo a trabajar con Angular 4, en una computadora Mac.

Inicialmente ejecutaba ng serve y cada vez que grababa archivos de la aplicación el proyecto automáticamente se compilaba y se actualizaba la dirección http://localhost:4200.

Sin embargo dejó de funcionar y no logró entender la razón.

Alguien me podría ayudar para intentar solucionarlo y así poder continuar con mis prácticas.

Gracias.

Complemento la pregunta:

Al ejecutar

ng --version

aparece lo siguiente:

@angular/cli: 1.3.2
node: 8.1.4
os: darwin x64
@angular/animations: 4.3.2
@angular/common: 4.3.2
@angular/compiler: 4.3.2
@angular/core: 4.3.2
@angular/forms: 4.3.2
@angular/http: 4.3.2
@angular/platform-browser: 4.3.2
@angular/platform-browser-dynamic: 4.3.2
@angular/router: 4.3.2
@angular/cli: 1.3.2
@angular/compiler-cli: 4.3.2
@angular/language-service: 4.3.2

Al ejecutar

ng serve

aparece lo siguiente:

NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200
Date: 2017-08-30T17:21:15.840Z                                                          
Hash: 44aab2e16c88308870fa
Time: 15670ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 38.8 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 203 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.66 MB [initial] [rendered]

webpack: Compiled successfully.

Al abrir la dirección localhost se puede ver el proyecto.

Sin embargo cuando se hacen cambios en los archivos del proyecto y se graban, el servidor de desarrollo no los actualiza automáticamente y los muestra en el navegador, como normalmente debe hacerlo. Esto es, el servidor no está escuchando o actualizando los cambios que se están dando en el proyecto.

Así que obliga a interrumpir el servidor con Ctrl + C y luego volver a ejecutar ng serve para poder ver el resultado de los cambios hechos, con lo cual hace muy lento el desarrollo.

5
  • Javier, buenas tardes, podrías subir el error que muestra la consola? Saludos
    – KN_
    Commented el 29 ago. 2017 a las 20:50
  • ¿Te da algun error en la terminal? ¿En el navegador, con cualquiera de las herramientas para desarrolladores, puedes observar algun error? Commented el 29 ago. 2017 a las 20:50
  • Ningún error me muestra la aplicación ni en la consola. Cuando ejecuto ng serve por primera vez se muestra bien en localhost:4200. Sin embargo cuando efectuó cambios en alguno de los archivos y grabo, no se compila automáticamente y muestra el resultado en el navegador, sino que los cambios realizados se ignoran. Para poderlos ver debo terminar ng serve y volverlo a ejecutar de nuevo. Es curioso porque funcionaba bien hasta hoy. Commented el 29 ago. 2017 a las 21:35
  • Hola Coder que editor de código estas manejando? si es atom el que estas utilizando podrías instalar una extensión llamada livereload podria servirte al igual funciona con sublime text o breakers y si utilizas vs code podrias utilizar uno llamado liveserve saludos.
    – Anthwam
    Commented el 3 jun. 2018 a las 6:00
  • Hola. Utilizo Vs Code. Intentaré con lo que me señalas. Commented el 6 jun. 2018 a las 1:32

3 respuestas 3

3

Asegúrate no haber modificado el script npm start en tu package.json ya que sino no te estará levantando el servidor de node.

"scripts": {
  "start": "ng serve"
}

De estar ok, puedes debugear el comando ng serve con

node --inspect --debug-brk ./node_modules/\@angular/cli/bin/ng serve

Copia la url que te lanzo en la terminal y pegala en tu navegador chrome. Luego tendrás que continuar la ejecución del script en Resume script execution y así obtendrás detalles del error en la terminal desde donde ejecutaste el debbuger


En caso de que no funcione lo recomendable es reinstalar angular-cli, ya que sin información del error no es posible brindarte mas ayuda.

Actualización desde la documentación:

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

En tu proyecto local:

rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@latest
npm install

Comprueba la versión:

ng --version
6
  • Gracias Joaquín por tu respuesta. Todo lo que tú me dices ya lo he intentado y el problema persiste. Aclaro: la aplicación no tiene ningún error. Lo que ocurre es que el servidor live de Ng no escucha, no se actualiza, cada vez que se hacen cambios en los archivos del proyecto y estos son guardados. Esto ocurre de manera inexplicable. Commented el 30 ago. 2017 a las 17:15
  • disculpa @JavierVargas el malentendido, parece ser un problema de Inotify en tu proyecto, que no alcanza a ver los cambios en todos los archivos. Una solución que vi (para una distro de linux - Ubuntu) es agregar al archivo sysctl.conf la variable correspondiente que utiliza inotify. Desde la terminal como administrador utiliza: echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf Con eso aumentas la cantidad de archivos de lectura que usa Inotify Commented el 30 ago. 2017 a las 17:32
  • Gracias Joaquín. He hecho lo que me recomiendas y me aparece "-bash: /etc/sysctl.conf: Permission denied". Incluso si lo precedo de la palabra sudo. Trabajo en un MackBook Pro, Yosemite. Al parecer esa es la solución al conflicto, pero no se en OSX cómo solucionarlo. En algunos foros aparece pero para Linux. Commented el 30 ago. 2017 a las 20:58
  • Comprueba la ruta /etc/sysctl.conf, no estoy seguro como debe ser en mac os, prueba navegar dentro de /private/etc Commented el 30 ago. 2017 a las 21:01
  • Ya encontré la ubicación de sysctl.conf y veo que contiene "fs.inotify.max_user_watches=524288". Lo subí al doble, grabé y reinicié el equipo. sin embargo nada de nada. El problema persiste. Commented el 31 ago. 2017 a las 0:36
1

Yo también tengo ese mismo problema, al editar algún archivo del proyecto este no se recompila ni se refresca la página.

Se me ocurrió correr sudo ng serve y así si recompila. No parece ser la solución pero me sirvió al menos, parece ser un problema con los permisos, ya que no detecta los cambios en los archivos y por eso éste no recompila.

0

Logre arreglarlo en xubuntu 18.04. Angular suele crear los proyectos para que no sean editables y por esta misma razon no te va a recompilar, asi que en mi caso lo que lo soluciono fue colocar el comando:

chmod 777 -R CarpetaQueContieneElProyecto

sudo ng serve

si te fallan los imports puede ser por la misma razon.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.