2

Tengo un problema con locals variables en express + node, hago res.locals.xxx = {zzz: "yyy"}; y acto seguido res.render(fileLocation, { req }, function (err, html), pero en Angular 11, en un componente, declaro declare var locals: any; y luego hago un console.log(locals); , esto lanza un error de undefined. He intentado:

-declare var _locals: any;
-declare var local: any;
-declare var _local: any;
-declare var xxx: any;

Pero todos dan error, ¿Cual es la forma correcta de capturar las variables locales de express con Angular? estas variables son diferentes con cada request.

EDIT: Pondré lo que he podido hacer con el mínimo de código posible, la parte del server se compondrá de dos archivos principales, el server.ts y el app.ts

server.ts

import * as https from "https";  
import app from "./app";  
const fs = require('fs');  
https.createServer({  
    key: fs.readFileSync('key.pem'),  
    cert: fs.readFileSync('cert.pem')  
},app).listen(8000);

app.ts

import * as express from "express";
import { enableProdMode } from "@angular/core";
enableProdMode();
class App {
    public app;
    constructor() {
        this.app = express();
        this.app.use(express.json());
        this.app.route("*").post((req, res) => {
            this.proxyRequest(req, res);
        });
    }  
    
    proxyRequest(req, res) {
        global["thing"] = "value_thing";
        const fileLocation = Path.resolve(process.cwd(), "views") + "/index.html";
        res.render(fileLocation, { req }, function (err, html) {
            res.send(html);
        });
    }
}  

export default new App().app;

Y en un componente Angular normal lo siguiente:

index.component.ts

declare var global: any;

@Component({
    selector: "app-index",
    templateUrl: "./index.component.html",
    styleUrls: ["./index.component.scss"],
})  

export class IndexComponent implements OnInit{
    constructor(){}  

    ngOnInit() {
        console.log(global.thing || global["thing"]);
    }
}

Quiero sustituir global["thing"] = "value_thing" por res.locals.thing= "value_thing"; en el mismo lugar u otra alternativa en res.render(fileLocation, { req } por res.render(fileLocation, { req, thing: "value_thing" } y recuperar este valor en index.component exactamente igual que he hecho con el global, pero con variables que desaparezcan después de cada request.

Muchas gracias

5
  • Angular se ejecuta en el navegador y express en el servidor... las variables no se comparten de ningún modo el 11 may. 2022 a las 10:55
  • pero si utilizo globals en express si que las puedo recuperar desde Angular, basicamente estoy usando espress como SSR, pero las variables globales dejan pérdidas de memoria y quería hacer lo mismo pero con variables que desaparezcan después de cada request, pero no se como hacerlo lo utilizo así global["a"] y en angular hago esto declare var global: any; y luego global.a y la puedo recuperar el 11 may. 2022 a las 11:04
  • ¿Sin ver ejemplos de código es complicado aonsejarte... puedes crear un ejemplo mínimo verificable? el 11 may. 2022 a las 11:45
  • crearé un ejemplo mínimo y lo publicaré aquí cuando lo tenga, muchas gracias el 11 may. 2022 a las 13:01
  • He creado un ejemplo mínimo de loq ue tengo y de lo que necesitaría el 13 may. 2022 a las 9:48

1 respuesta 1

2

La verdad es que no hay mucha documentación oficial sobre como resolver este problema, pero finalmente he conseguido hacer funcionar lo que quieres. Para implementarlo necesitamos completar 3 pasos:

Express

Necesitamos pasar a la parte de Angular los datos. Esto se consigue mediante los parámetros del método render:

server.post('*', (req, res) => {
    // Obtenemos los datos que queremos mandar al componente
    // aquí simplemente estoy usando un valor fijo de prueba
    const datos = { data: "Test" };

    res.render(indexHtml, {
      req,
      // declaramos un proveedor de los datos 
      providers: [
        { provide: "message", useValue: datos }
      ]
    });
  });

Código en Angular: Añadir la importación de los módulos ...TransferStateModule

Tenemos que añadir a los imports del módulo del lado servidor ServerTransferStateModule, para poder usar un servicio que nos será necesario

Al módulo del lado del navegador tenemos que añadirle su equivalente: BrowserTransferStateModule.

Una vez tenemos completada esta parte, en el Componente necesitamos hacer algo como lo siguiente:

Angular: Inyección de los datos en los Componentes

  constructor(
      @Inject(PLATFORM_ID) private platformId: Object,
      // opcional, puesto que sólo se provee en el lado servidor
      @Optional() @Inject('message') public message: {data: any},
      private readonly transferState: TransferState
    ) {

    const storeKey = makeStateKey<{data: any}>('message');
    if (isPlatformBrowser(this.platformId)) {
      // el segundo parámetro es el valor por defecto, si no se
      // proveyó desde el servidor un valor
      this.message = this.transferState.get(storeKey, {data: "default"});
    } else {
      this.transferState.set(storeKey, this.message);

    }
  }

Explicación del código: El HTML del componente se va a calcular dos veces:

  • en el lado del servidor, con lo que el parámetro message tendrá el valor esperado y el HTML que se envía en la respuesta mostrará ese dato.
  • en el navegador, cuando se haga la "rehidratación". Ahí ese parámetro no existe y será null, por lo que el HTML será actualizado automáticamente con ese valor.

Si no usáramos transferState, veríamos un parpadeo en el navegador cuando se carga el HTML: durante un instante se mostrará el mensaje y casi instantáneamente se eliminará.

La forma de mantener ese valor es transferir el estado desde el servidor al cliente y la forma de hacerlo es la que se ve en el constructor:

  • si estamos en el lado servidor (isPlatformBrowser(this.platformId) es falso), guardamos el estado.
  • si estamos en el navegador, recuperamos el estado.
1
  • Muchas gracias Pablo, esto me ayuda muchísimo el 17 may. 2022 a las 7:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.