Angular·Ubuntu

Port forwarding en VSCode Remote Development

remote-extensionpack

Trabajando en un proyecto en Angular usando la extensión de desarrollo remoto que VSCode tiene para poder desarrollar dentro de un contenedor Docker, me encontré con un extraño comportamiento:

Al arrancar el servidor de desarrollo de Angular mediante ng serve, en la consola del VSCode se me mostraba el típico mensaje con el enlace para abrir la aplicación en el navegador.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Lo curioso del caso es que al pulsar (Ctrl+Click) en dicho enlace se me habría el navegador en la URL http://127.0.0.1:40999/ en vez de http://localhost:4200/.  Es más, si intentaba acceder a http://localhost:4200/ no podía acceder a la aplicación. 

Y todo esto, habiendo publicado el puerto en el fichero devcontainer.json


...
"appPort": [
// Front-end development (Angular server)
"0.0.0.0:4200:4200"
],
...

Sigue leyendo “Port forwarding en VSCode Remote Development”

Angular·JavaScript·node·Programación

Instalación de NodeJS

nodejs
Según la versión del Sistema Operativo (Linux/Windows 32/64bits) que tengamos y de las necesidades concretas del proyecto (versión concreta de NodeJS), procederemos a instalar la versión de NodeJS correspondiente, que podemos descargar de https://nodejs.org/en/download/releases/:

  • node-v8.11.3-linux-x86.tar.xz (Linux 32 bits)
  • node-v8.11.3-linux-x64.tar.xz (Linux 64 bits)
  • node-v8.11.3-win-x86.zip (Windows 32 bits)
  • node-v8.11.3-win-x64.zip (Windows 64 bits)

La instalación consiste en descomprimir el fichero correspondiente en la ubicación deseada (por ejemplo /home/username/software/node-v8.11.3-linux-x64 donde username es el nombre del usuario para Linux ó C:\software\node-v8.11.3-win-x64 para Windows).

Una vez instalado NodeJS, para poder utilizarlo desde la línea de comandos, debemos añadir al PATH de ejecución, la ruta de los ejecutables (node y npm).

En Linux sería algo así (podemos añadirlo al fichero ~/.profile para que sea permanente):

export PATH=/home/username/software/node-v8.11.3-linux-x64/bin:$PATH

En Windows sería algo así (podemos establecer su valor en MyComputer->Properties->Advanced->Env Variables->Path para que sea permanente):

set PATH=C:\software\node-v8.11.3-win-x64;%PATH%

Sigue leyendo “Instalación de NodeJS”

Angular·JavaScript·Programación

Entendiendo los módulos Angular (NgModule) y sus ámbitos

angular

NgModule es la estructura básica con la que te encuentras al codificar una aplicación con Angular, pero también es la más sutil y compleja, debido a sus diferentes ámbitos. La documentación de Angular tiene incluso una completa FAQ acerca de NgModules, pero sigue siendo una locura entenderlos.

Sigue leyendo “Entendiendo los módulos Angular (NgModule) y sus ámbitos”

Angular·JavaScript·Programación

Qué son los Módulos en Angular

angular
Los módulos de Angular representan un concepto central y juegan un papel fundamental en la estructuración de las aplicaciones Angular.

Un Módulo Angular agrupa un conjunto de artefactos Angular, como son componentes, directivas, pipes y servicios que forman parte de ese mismo módulo. Dicho esto, representa una agrupación lógica en lo que podríamos llamar área funcional de nuestra aplicación (ej. módulo de contactos, módulo de administración,…). Es más, un Módulo Angular también define las dependencias con otros módulos, esto es, que otros módulos necesita importar y a su vez qué componentes, directivas o pipes exporta.

@NgModule({
imports: [ BrowserModule, HttpModule, FormsModule ],
declarations: [ PersonComponent, ContactComponent, ContactListComponent ],
providers: [ PersonService, ContactService ],
exports: [ ContactListComponent, ContactComponent ]
})
export class ContactModule {}

Sigue leyendo “Qué son los Módulos en Angular”