Angular: cuando necesita ver la aplicación, pero el backend aún no está listo

Si está involucrado en el desarrollo de frontend, entonces probablemente conozca las siguientes puestas en escena: los términos del proyecto se están reduciendo rápidamente, su gerencia o el cliente, o ambos, juntos quieren ver con sus ojos la aplicación que funciona en este momento, incluso con datos falsos. Al mismo tiempo, puede haber un reverso, pero es la capa de interacción API con el frente lo que falta en la palabra.

Entonces, recientemente me enfrenté a una situación así, y estoy desarrollando una interfaz para angular (la gente sentada en las sillas le dio unas palmaditas lentas, alguien asintió con comprensión).

Ahora lo intentaré en serio. Por un lado, la situación no es infrecuente y se pueden elegir muchas soluciones.

Se me ocurrieron varias soluciones:

1. Datos de nivel de componente de código duro
2. Datos de código duro a nivel de servicios de resolución, anclarlos a las rutas necesarias
3. Datos de código duro a nivel del proveedor de servicios de datos
4. Enjuague la API y, de acuerdo con los contratos acordados, devuelva datos codificados

Pero cualquiera de estas opciones parecía una muleta inagotable, para cada una de las cuales había importantes deficiencias.

1. La primera opción desapareció de inmediato: una solución no utilizada absolutamente inconveniente, a medida que se desarrolla el proyecto, todo tendrá que reescribirse.
2. Esta solución podría tener lugar, pero nuevamente, se reescribirá la estructura del proyecto y la lógica de los componentes.
3. Una opción posible, incluso puede devolver datos de código auxiliar de forma asincrónica, simulando una llamada al servidor, sin embargo, como en soluciones anteriores al problema, nuestros interceptores (si existen, pero existen) estarían sin trabajo, y resulta que la imitación del trabajo con respaldo se vuelve incompleto.
4. La última opción parecía bastante aceptable, sin los problemas que tenían las opciones anteriores, pero no quería escribir código duro en el proyecto de back-end simplemente por razones de higiene.

Como resultado, se eligió otra opción: crear un servidor web separado, que devolvería datos de acuerdo con rutas y contratos, y configurar una configuración separada para el ensamblaje y la ejecución de angular. Resultó ser fácil hacer ambas cosas.

Para implementar el servidor simulado, se seleccionó express .

Comencemos con eso.

Seleccionamos el lugar donde queremos escribir el código para el servidor msk, por ejemplo, en el directorio del servidor simulado al lado del proyecto ng.

A continuación, debe inicializar el proyecto y agregar el paquete con express.

npm init 

 npm install --save express 

Luego, agregue un código que nos devuelva datos. Creamos el archivo index.js, tomamos el código del primer tutorial.

 const express = require("express"); const app = express(); app.get("/url", (req, res, next) => { res.json(["Tony", "Lisa", "Michael", "Ginger", "Food"]); }); app.listen(3000, () => { console.log("Server running on port 3000"); }); 

Iniciar el servidor

 node index.js 

Consulte con el cartero:



Todo está super, el servidor está funcionando. Ahora configuremos una de las rutas, como si estuviéramos solicitando datos de una API real. Digamos que necesitamos una lista de todos los libros, llene el archivo books.json con libros

 [ { "rn": 0, "id": "0", "name": "Jungle", "type": 0, "wells": 10042, "default": false, "hidden": false, "author": "Admin" }, { "rn": 1, "id": "1", "name": "Main", "type": 1, "wells": 156, "default": true, "hidden": false, "author": "User" } ] 

Y actualice el archivo de la aplicación:

 const express = require("express"); const app = express(); app.get("/api/book/", (req, res, next) => { const books = require('./books'); res.json(books); }); app.listen(3000, () => { console.log("Server running on port 3000"); }); 

Y verifica:



Genial
Ahora comencemos con la aplicación angular.
Agregue la configuración que almacena la dirección al reverso a los archivos de entornos / environment * .ts.
environment.ts:

 export const environment = { production: false, backend: 'http://localhost:5000/' } 

environment.prod.ts

 export const environment = { production: true, backend: 'http://localhost:5000/' } 

En modo normal, y en prod y en modo de desarrollo, buscaremos .net core api en el puerto 5000, como se describió anteriormente. A continuación, describimos la configuración para el regreso temporal
environment.mock.ts

 export const environment = { production: false, backend: 'http://localhost:3000/' } 

Aquí, como puede ver, estamos buscando una API en el puerto 3000, donde ejecutaremos express.

Ahora necesitamos un interceptor que dirija las llamadas al servidor correcto, dependiendo de la configuración.

 @Injectable() export class RequestInterceptor implements HttpInterceptor { baseUrl: string; constructor() { this.baseUrl = environment.backend; } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(this.modifyRequest(req)); } private modifyRequest = (req: HttpRequest<any>): HttpRequest<any> => { if (req.url.startsWith('api/')) { const url = this.baseUrl; req = req.clone({ url: url + req.url }); } return req; } } 

Queda por configurar la nueva configuración para ensamblar e iniciar la aplicación para que funcione con el servidor simulado.

Para esto necesitamos ajustar angular.json un poco.

En la sección de su proyecto, arquitecto / compilación / configuraciones, agregue una nueva configuración de compilación simulada y describa el reemplazo de los archivos de entorno para esta configuración. También para el modo de servicio, cree una configuración simulada y especifique la opción de compilación deseada

 { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "your-project": { /*****/ "architect": { "build": { /*****/ "configurations": { "production": { /*****/ }, "mock": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.mock.ts" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "your-project:build" }, "configurations": { "production": { "browserTarget": "your-project:build:production" }, "mock": { "browserTarget": "your-project:build:mock" } } } }, /*****/ } } } 

Eso es todo, ahora queda ejecutar el proyecto en la configuración deseada

 ng serve --configuration=mock 

y verifique dónde vuelan las llamadas a la parte posterior:



Todo es genial

De hecho, este diseño todavía nos ayudará mucho cuando ajustemos la integración y las pruebas e2e al proyecto. Intentaré escribir sobre esto en un futuro cercano.