BLOG

Jueves, 14 Diciembre 2017 08:14

Como exportar y compartir un paquete para Angular

En el blog de esta semana veremos cómo exportar y compartir un paquete para Angular. Stephanos Philippides, Developer en Trans Solutions Systems y autor de este artículo, nos enseñará de manera rápida y sencilla cómo lograrlo.

En el mundo de la tecnología y la ciencia en general, las personas se apoyan mucho en los logros y descubrimientos de sus pares. En la programación, los desarrolladores se ayudan unos a otros compartiendo paquetes, librerías y demás para no incurrir en los mismos problemas una y otra vez. Una muy común e importante manera de compartir nuestro código para JavaScript, y en especial para Angular, es mediante paquetes publicados en el repositorio de npm.

 

Vamos a demostrar cómo se crea y se exporta un paquete a npm. Esto nos permitirá compartir con otras personas un componente y/o servicio que hayamos creado.

Creando el módulo.

Para comenzar, necesitamos instalar npm que viene junto con todas las versiones recomendadas de Node. [https://nodejs.org/es/download/]

Primero, instalaremos angular-cli, para ayudar con la creación del entorno que nos permitirá desarrollar nuestro paquete para luego poder exportarlo.

```

npm install -g angular-cli

```

Luego, usaremos esta herramienta para crear nuestra aplicación inicial. Esta tendrá dos propósitos: un modelo para demostrar la funcionalidad de nuestro componente/servicio y el componente/servicio que exportaremos más adelante.

```

ng new ng-simple-loader

```

En este caso, crearemos un splash-screen que mostrará que nuestra página web se encuentra cargando.

Nuestra estructura de directorios y archivos después de ejecutar el comando `ng new` será parecida a esta:

 

En este caso, usaremos el modulo y componente ‘app’ para demostrar la funcionalidad de nuestro módulo.

Ahora, crearemos un nuevo módulo con un componente y un servicio.


Aquí irá nuestro simple módulo, componente y servicio. Todos juntos conforman nuestro paquete.

El código será simple:

 

 

 

Cabe resaltar algunos detalles a la hora de crear un módulo para exportar.

1. Jamás importar el módulo ‘BrowserModule’. Ese módulo sólo lo debe usar el cliente final. Si necesitan las directivas *ngIf, *ngFor, etc, utilizar el módulo ‘CommonModule’.

2. No olvidar exportar los componentes que se usarán desde ese módulo. Además, declararlos, pues de lo contrario el cliente final no podrá acceder a los componentes que creemos.

Empaquetando nuestro módulo.

Para esto, usaremos las mismas herramientas que utiliza el equipo de Angular para sus módulos.

```

npm install @angular/compiler @angular/compiler-cli typescript rollup uglify-js --save-dev

```

Tendremos que configurar algunas cosas para que la compilación vaya como esperamos.

 

Debemos resaltar dos cosas en este punto:

1.  Los “path” explícitos son necesarios. De lo contrario, cuando exportemos la librería no vamos a saber dónde encontrar los archivos.

2. “sctrictMetadataEmit” es necesario para la compilación AoT. 

 

Estos scripts nos permitirán convertir nuestro código fuente en un paquete listo para publicar a npm.

 

La configuración de rollup es importante para poder exportar nuestro paquete como un módulo UMD. Así, puede ser utilizado no solo en el browser sino en todos los lugares donde Angular es soportado.

Después, solo necesitamos compilar nuestro paquete para publicarlo a npm usando el script que creamos previamente.

```

npm run build

```

Finalmente, podemos exportar nuestro paquete compilado. Se encuentra en la carpeta `dist` a npm luego de agregar un archivo package.json con la información necesaria.

```

cd dist

npm publish

```

Ahora cada vez que deseemos actualizar nuestra librería sólo necesitaremos actualizar el código, subir la versión del paquete en el package.json y publicar el paquete usando npm publish.