Cómo renderizar un componente angular a HTML en Node.Js (para enviar correos electrónicos)

Verificamos de forma completamente cada reseña en nuestra página web con el objetivo de enseñarte siempre información veraz y actual.

Solución:

El enfoque es enviar plantillas generadas dinámicamente basadas en componentes Angular al correo electrónico de los usuarios desde el proyecto Angular SSR.

Encuentre el repositorio de ejemplo al final de esta respuesta.

Los pasos que debe seguir;

1. Diseñe sus plantillas en una ruta de enrutamiento individual dedicada a mostrar solo las plantillas de correo electrónico, no sus barras de navegación, CSS global, etc.

Ejemplo:

bienvenido-email-component.component.ts

import  Component, OnInit  from '@angular/core';
import  ActivatedRoute  from '@angular/router';

@Component(
  selector: 'app-welcome-email-component',
  templateUrl: './welcome-email-component.component.html',
  styleUrls: ['./welcome-email-component.component.css']
)
export class WelcomeEmailComponentComponent implements OnInit 

  username: any;

  constructor(private route: ActivatedRoute)  

  ngOnInit(): void 
    this.route.params.subscribe(params => 
      this.username = params.username;
    );
  

bienvenido-email-component.component.html

Welcome username

Debe especificar una ruta para este componente como se muestra a continuación, de modo que cuando el usuario navegue hasta el welcome-email/username ruta debe mostrar solo el componente generado por la plantilla de correo electrónico.

 path: 'welcome-email/:username', component: WelcomeEmailComponentComponent 

2. Implemente Angular SSR en su proyecto a partir de las excelentes pautas de Angular SSR, Representación del lado del servidor (SSR) con Angular Universal.

Son solo dos líneas de código.

ng add @nguniversal/express-engine
npm run dev:ssr

3. Finalmente, cree una API del lado del servidor para generar la plantilla desde su componente Angular y envíe correos electrónicos o proporcione el código HTML del componente único, agregue la función API en su server.ts como a continuación.

servidor.ts

server.get('/api/send-email/:username', (req, res) => 
    // Below is the URL route for the Angular welcome mail component
    request(`http://127.0.0.1:4200/welcome-email/$req.params.username`, (error, response, body) => 
        // TODO : Send email to the user from WelcomeEmailComponentComponent.ts component as `body`
        // use the body to send email
        res.send('Email sent');
    );
);

Código de ejemplo: https://github.com/aslamanver/angular-send-component-email

La demostración de un componente generado dinámicamente en este repositorio;

Finalmente al acceder /api/send-email/:usernameesto generará el componente de correo de bienvenida y le dará el cuerpo HTML de eso, luego puede continuar con su función de envío de correo electrónico.

Aplaudo la respuesta de @Googlian. Sin embargo, angular produce demasiado HTML5 desconocido, CSS3 y funciones incluidas específicas de angular, por lo que después de eso, debe eliminarlas una por una específicamente si desea un contenido de correo electrónico realmente válido; de lo contrario, su correo electrónico probablemente se considerará como spam bu mailclients.

Le sugiero que tenga un componente con estándares xHTML sin CSS3, características HTML5 no experimentales, y construya una plantilla de correo electrónico con this y ElementRefluego analice los campos requeridos manualmente.

Envía el string al lado del servidor, nodejs, luego envíelo como correo electrónico. Puedes usar nodemailer

Comentarios y puntuaciones

Si posees algún recelo o forma de aumentar nuestro tutorial puedes realizar un exégesis y con placer lo estudiaremos.

---

---

Utiliza Nuestro Buscador