Instalar un nuevo proyecto en Angular 10

lunes, septiembre 21st, 2020

Advertencia: antes de empezar debes instalar NodeJS y package manager, sacaremos pronto un tutorial acerca de como hacerlo para windows y Linux.

Para crear un nuevo proyecto en Angular 10 debes tomar en cuenta algunos cambios en la sintaxis de los comandos, a continuación te doy mas detalles al respecto:

Paso 1 ) Crear un nuevo proyecto

Crear un nuevo proyecto con el siguiene comando

ng new NuevoProyecto

Al hacerlo angular creará una carpeta con el nombre «NuevoProyecto» y dentro copiara todos los archivos necesarios para que tu proyecto funcione, no intentes entender que hay dentro de cada una de esas carpetas, ya que son todas las librerías base para que tu proyecto compile. Cada proyecto angular al momento de escribir este articulo tiene un peso aproximado de 500 mb, esto puede variar de acuerdo a tu versión o librerías que ocupes

Paso 2) Instalar librerías complementarias

En mi caso fue necesario instalar estas librerías , dependiendo de la versión de NPM que estés usando tal vez no las necesites; si al momento de correr tu proyecto angula-cli te las solicita puede ejecutar este comando.

npm i @angular-devkit/schematics
npm i @angular-devkit/core

Si tienes dudas sobre si debes o no instalar estas dependencias de desarrollo, ejecuta en tu terminal el siguiente comando (recuerda que debes estar en el directorio de tu proyecto, justo donde este el archivo package.json)

ng version

Si en la salida de este comando aparece lo siguiente ya lo tienes instalado

Hasta aquí ya puedes empezar a trabajar con tu proyecto, crear componentes e instalar más dependencias, a continuación instalaremos las librerías necesarias para conectarse a una base de datos firebase.

Paso 3) Instalar Firebase

La librería de angularfire2 es la que te permite conectarte a la api de firebase, dependiendo de tu versión del npm tal vez necesites incluir el parámetro –save para que la librería se te agregue como dependencia, aunque a partir de la versión 5 de npm todas se instalan como dependencia.

npm install firebase angularfire2 --save

Al terminar debes tener algo como la siguiente imagen

Paso 4) Instalar material

Material es un patrón de diseño para aplicaciones que google implementa en muchos de sus productos, como angular es de google, también incluye este patrón de diseño, yo lo describiría como una especie de librería visual para hacer que tus aplicaciones tengan mejor presentación.

ng add @angular/material

A continuación el Angular CLI te pedirá el tema a utilizar y al terminar tendrás un resultado como el siguiente:

No es obligación incluir material en tus aplicaciones angular, puedes agregar un estilo diferente incluyendo una librería como bootstrap 4, o bien desarrollando tus propios estilos, en otro post abordaremos este tema.

Paso 5) Probar que el material funciona

Una vez que ya tienes la librería de material instalada, debemos probarlo para asegurar que funcione correctamente, para ellos haz lo siguiente:

Por ejemplo si queremos agregar un Slider que es un componente para simular un switch corredizo (ver imagen )


ejemplo de slider

Tendremos que ir primeramente al app.module.ts y luego agregar la importación del componente.

import { MatSliderModule } from '@angular/material/slider';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSliderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ahora buscar el archivo html del componente app.component.html principal y agrega el siguiente selector (el selector es la etiqueta html que hala el componente a su presentación visual en el html )

<mat-slider min=»1″ max=»100″ step=»1″ value=»1″></mat-slider>

Existen más componentes que puedes agregar, no solo el Slider, a continuación te dejo unos cuantos componentes:

Material List

Agregando otros componentes de Angular Material

import {MatListModule} from '@angular/material/list';

Se agrega ahora los list del material al archivo app.component.html

<mat-list>
    <mat-list-item> Pepper </mat-list-item>
    <mat-list-item> Salt </mat-list-item>
    <mat-list-item> Paprika </mat-list-item>
  </mat-list>

OJO: siempre hay que añadir la sentencia de importación en el module.ts

Material Icons

Existe un componente para agregar iconos

import {MatIconModule} from '@angular/material/icon';

Agregar algunos iconos

<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
<mat-icon aria-hidden="false" aria-label="Example home icon">accessibility_new</mat-icon>
<mat-icon aria-hidden="false" aria-label="Example home icon">dialpad</mat-icon>

Firebase

Generar la base de datos tal como se indica aqui: crear una base de datos firebase(pendiente )

Una vez ya tenemos la base de datos de firebase, debemos crear una variable de entorno en el archivo environment.ts ahí debes copiar la firebaseConfig de tu base de datos, esto normalmente se hace en la consola de Firebase, solo para que tenga una idea, esta llave se parece a lo siguiente

firebase: {
    apiKey: "ajhajhjshdjshdjshdjshdjhsj",
    authDomain: "tubase-sv34.firebaseapp.com",
    databaseURL: "https://tubase-sv34.firebaseio.com",
    projectId: "tubase-sv34",
    storageBucket: "tubase-sv34.appspot.com",
    messagingSenderId: "s2736726372",
    appId: "1:s2736726372:web:s2736726372",
    measurementId: "F_HHDH73"
  }

El archivo environment.ts se verá como el que sigue

export const environment = {
  production: false,
  firebase: {
    apiKey: "ajhajhjshdjshdjshdjshdjhsj",
    authDomain: "tubase-sv34.firebaseapp.com",
    databaseURL: "https://tubase-sv34.firebaseio.com",
    projectId: "tubase-sv34",
    storageBucket: "tubase-sv34.appspot.com",
    messagingSenderId: "s2736726372",
    appId: "1:s2736726372:web:s2736726372",
    measurementId: "F_HHDH73"
  }
};

Ahora que ya tienes la constante firebase declarada, debes incluirla en tu archivo del app.module.ts, para que sea pública en todo el proyecto

También debes importar la librerías del angularfire. Agregar las siguientes importaciones en la sección inicial del archivo app.module.ts

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
import { AngularFirestoreModule } from '@angular/fire/firestore';

También debes importarlos el @NgModule del mismo archivo, recuerda que esta directiva une todos los módulos y los presenta en uno solo, como las librerías de angularfire2 son externas van en la sección imports, los componentes que nosotros desarrollemos esos si van en la sección declarations , el archivo app.module.ts quedará mas o menos como te lo muestro a continuación:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAnalyticsModule,
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Creando el modelo de la base de datos

Comando para crear el modelo

ng generate class nuevo/user --type=model

importar al componente que queremos usarlo

import {User } from '../nuevo/user.model';

Una vez importado hay que delcararlo dentro de la clase del componente


Actualizar Angular y no tener problemas

sábado, julio 11th, 2020

Uno de los aspectos más criticados de angular es el incremento continuo de versiones, y es que las versiones de angular se suceden a un ritmo vertiginoso, puedes sentirte abrumado cuando acabas de terminar un proyecto y te das cuenta que la última versión lo deja obsoleto, aunque hayas usado la última cuando lo iniciaste.

Es por eso que te recomiendo que mantengas actualizados tus proyectos lo más pronto posible, tratando de aplicar los parches y actualizaciones mayores o menores lo antes posible. Pero… cómo actualizar angular y no tener problemas.

Consideraciones antes de actualizar angular

Debes tomar en cuenta algunos aspectos sobre las versiones de angular y cómo se aplican a tus proyectos para no tener problemas.

El equipo de Angular tiene en mente que los cambios realizados afecten en lo mínimo la estabilidad de tus proyectos, con todo no siempre se puede mantener la compatibilidad entre versiones, y en algunas ocasiones debes correr scripts para poder adaptar una versión antigua a una más reciente

Las actualizaciones se dividen así:

Actualizaciones Mayores:

Estos implica que los cambios realizados en las características pueden afectar la estabilidad de tu proyecto, antes de actualizar a una versión mayor debes asegurar bien que tu proyecto podrá soportar los cambios

Actualizaciones menores

Las actualizaciones menores son totalmente compatibles hacia atrás puedes realizarlas sin problema y sin preocupaciones

Parches

Los parches están libres de todo riesgo, no debes preocuparte por ellos mas que de mantenerlos al día en tu proyecto, pues resuelven asuntos de seguridad y cosas menores

Recomendaciones para actualizar

Si tienes que actualizar angular a una versión menor bajo una misma versión mayor, como por ejemplo de la 7.2.11 a la 7.5.9 entonces debes hacerlo directamente, sin realizar actualizaciones intermedias, es decir que puedes no tienes que instalar la 7.3, 7.4 para llegar a la 7.5 puedes hacerlo directamente.

Pero si tienes que actualizar una versión mayor antigua a la más reciente, te recomiendo que lo hagas paso a paso, por ejemplo si tuvieras que actualizar de la versión 4.5.2 a la versión 7.5.9, debes aplicar primero la versión 5.0 luego la 6.6 y por ultimo la versión deseada.

Cómo actualizar angular

Paso 1) Desinstalar las versiones anteriores

npm uninstall -g angular-cli
npm uninstall -g @angular/cli

Paso 2) Borrar el caché de NPM

npm cache clean --force

Paso 3) Instalar la última versión de angular

npm install -g @angular/[email protected]

Recuerda que si tienes Debian como yo y estas usando NVM lo que instales con NPM activo se queda ahí, por ejemplo si tenias la version 10.16.3 y luego actualizar ahi el angular, entonces esa versión solo estará disponible cuando tengas seleccionada la versión 10.16.3, si todavía no sabes que es NVM visita el siguiente post


Problema con Debian y node js

sábado, julio 11th, 2020

Una de las ventajas de usar Debian como SO para la programación y el desarrollo de aplicaciones, es sin duda, su gran estabilidad, esto se logra sobre la base de repositorios probados y depurados por una larga comunidad de usuarios. Pero esta misma fortaleza puede llegar a convertirse en su mayor debilidad, cuando de usar lo últimos releases en paquetería de terceros se trate.

Esto es lo que me paso, cuando usaba Debian 9 Stretch y quise instalar node js para trabajar con angular, resulta que cuando lo instalaba siempre me lo dejaba en la versión 4.8.1 pero para trabajar con angular necesitaba la versión 10 y no había forma de instalarlos desde los repositorios de Debian.

La solución llegó con una herramienta llamada NVM (Node Version Manager ) , esta herramienta te permitirá seleccionar la versión de Node Js que desees con un simple comando, puedes cambiar de la versión 4 a la versión 10 en un momento , y luego volver a la versión 4 si así lo necesitas.

¿Cómo instalar NVM en Debian ?

curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh

Puedes verificar el contenido de instalador con

nano install_nvm.sh

Correr el script con bash para que se instale

bash install_nvm.sh

Podríamos reiniciar el equipo o simplemente cerrar sesión, pero mejor aplicas el siguiente comando para que emule el reinicio

source ~/.profile

Otro comandos de utilidad NVM

Ver las versiones disponibles con el comando NVM

nvm ls-remote

El comando anterior te mostrará todas las versiones disponibles desde la mas antiguas hasta la mas reciente, pero seleccionaremos una version estable

Seleccionamos la versión 10.16.3 con el comando siguiente

nvm install v10.16.3

Ahora la pongo en uso con el siguiente comando

nvm use  v10.16.3

Si desea saber cual es la versión de node que tienes en uso, debes correr el siguiente comando

nvm ls

Con esto ya podemos actualizar el NPM a la última versión

npm install -g [email protected]

confirmamos el NPM -V

npm -v 

Si necesita limpiar el cache

npm cache clean --force

si deseas borrar el cache del npm puedes usar este comando

npm cache clean --force

Espero que este pequeño tutorial te ayude a resolver los problemas de node js y debian, dejame un comentario si tienes algún problema



Redes sociales