Instalar un nuevo proyecto en Angular 10

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 )

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

---