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:
Crear un nuevo proyecto con el siguiene comando
ng new NuevoProyectoAl 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
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 versionSi 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.
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 --saveAl terminar debes tener algo como la siguiente imagen
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/materialA 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.
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 )
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:
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
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>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 { }
Comando para crear el modelo
ng generate class nuevo/user --type=modelimportar al componente que queremos usarlo
import {User } from '../nuevo/user.model';
Una vez importado hay que delcararlo dentro de la clase del componente
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.
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í:
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
Las actualizaciones menores son totalmente compatibles hacia atrás puedes realizarlas sin problema y sin preocupaciones
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
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.
npm uninstall -g angular-cli
npm uninstall -g @angular/cli
npm cache clean --forcenpm install -g @angular/cli@latestRecuerda 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
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.
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.shCorrer el script con bash para que se instale
bash install_nvm.shPodríamos reiniciar el equipo o simplemente cerrar sesión, pero mejor aplicas el siguiente comando para que emule el reinicio
source ~/.profileVer las versiones disponibles con el comando NVM
nvm ls-remoteEl 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.3Ahora la pongo en uso con el siguiente comando
nvm use v10.16.3Si 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 npm@latest
confirmamos el NPM -V
npm -v 
Si necesita limpiar el cache
npm cache clean --forcesi deseas borrar el cache del npm puedes usar este comando
npm cache clean --forceEspero que este pequeño tutorial te ayude a resolver los problemas de node js y debian, dejame un comentario si tienes algún problema