• ¿Como llegá un script al navegador?

Es un motor de angular 8 que permite crear aplicaciones mas pequeñas ya que al compilar este elimina el codigo que no estas usuando para activarlo se debe ir a tsconfig.json y agregar la siguiente instrucción

"angularCompilerOptions": {
    "enableIvy": true,
  }

Differential Loading es un proceso mediante el cual el navegador elige entre Javascript moderno o heredado en función de sus propias capacidades, es decir se crean dos paquetes a compilar uno para los navegadores modernos que permiten ES2015 > y un paquete para navegadores legacy o antiguos que solo admiten la versión de ES5 de Javascript.

El navegador cargará automáticamente el paquete que le corresponda, gracias al soporte de los módulos de ES6 en los navegadores más nuevos, por lo que tendrán que cargar menos código y cargar una cantidad mucho menor de polyfills.

Son aquellos que nos habilitan extender las funcionalidades del cliente de comandos de Angular (sobretodo correr tareas y correrlas a nuestro modo). 3 categorías de comandos:

Tareas de creación y modificación de código. ng new, ng generate, ng add, ng update. Tareas simples. ng help, ng version, ng doc Tareas complejas. ng serve, ng build, ng test, ng lint. los comandos de tareas complejas se abren para extender y hacerlo a nuestro manera. Ej. @angular/fire y @azure/ng-deploy

El patrón LIFT lleva la escalabilidad desde las buenas prácticas que Angular propone para mantener un proyecto organizado y estandarizado.

• Locate: Expresa que debe haber una facilidad de encontrar los componentes, directivas, pipes, servicios, etc en la estructura del proyecto.
• Identify: Se trata de reconocer rápidamente el rol que cumple cada uno de los archivos, es decir, colocarle ‘ apellido’ al archivo.
• Flat: Mantener la estructura de nuestro proyecto de forma plana, con máximo 3 niveles de profundidad en la estructura de carpetas del proyecto.
• Try DRY: Alienta la reutilización de código con el fin de tener un proyecto mantenible.

• Dumb components Debe encargarse de la parte visual e interactiva, los dump components tienene de apellido .component
• Smarti component: trae datos para mandarlos a al dump component, los smart compnents .container

Esto es para que los imports sean mas cortos y estéticos en nuestro código, así mismo en caso de refactorizar la estructura de el codigo no hay que ir a cambiar todos los imports para esto se debe ir al tsconfig.json y agregar una propiedad llamada paths ejemplo:

"paths": {
    "@core/*": ["src/app/core/*"],
  }

Para luego realizar las importaciones de la siguiente forma:

import {Product} "@core/models/product.model"

Para evitar anidamientos de subscribe se usa la switchMap de Rxjs dentro de pipe (modifica un subcribe) esto lo hace es cambiar un subcribe por otro ejemplo:

this.route.params
.pipe(
   switchMap((params: Params)=>{
      return this.productServices.getProduct(params.id);
   })
)
.subscribe((product) =>{
   this.product = product;
})

Adicionalmente para reducir mas el código podemos convertir la variable this.product en un Observable dejando el código de la siguiente manera:

product$ : Observable<Product>

....

this.product$ = this.route.params
.pipe(
   switchMap((params: Params)=>{
      return this.productServices.getProduct(params.id);
   })
);

Y como ahora esta variable es un observable se tiene subcriber desde el template de la siguiente forma:

<div *ngIf=(product$ | async) as product>
 {{product.name}}
<(div>

Muchas peticiones están envueltas en meta-data o otros objectos, sin embargo desde nuestra peticiones queremos ignorar estas meta-data para ello podemos hacer lo siguiente:

getRamdomUsers() : Observable<User[]>{
 return this.http.get('url')
 .pipe(
     map((response: any) => response.result as User[])
  )
}

Este es un sistema en donde podemos registrar logs del sistema

En pruebas se utiliza el pratron de las 3 A por sus siglas en ingles las cuales son Arranque, Actuar, resolver ejemplo de estas pruebas son:

// arranque 
const exptData = [{
    id: 1,
    title: "nombre",
    price: 200,
    description: "description",
    image: "url"
},{
    id: 2,
    title: "nombre2",
    price: 200,
    description: "description2",
    image: "url"
}]

//actuador

let dataError, dataResponse;

service.getAll().subcribre((response) => {
    dataResponse = response;
}, error => {
    dataError = error;
})

const req = httpTestController.expectOne('url')

req.flush(exptData);

//Hipotesis

expect(dataResponse.length).toEqual(2);

Esto ayuda a revisar que parte de codigo o flujos faltan por probar para correr ejecutar el siguiente comando

ng test --watch=false --codeCoverage=true