[Angular|Node.js] Wysyłanie wiadomości e-mail

stycznia 15, 2025

W celu wysłania wiadomości e-mail z aplikacji Angular potrzebny będzie backend, który obsłuży wysyłkę. Można skorzystać z zewnętrznych usług np. EmailJS lub obsłużyć wysyłkę maila w Node.js. W tym wpisie popracujemy nad tą drugą możliwością.

Node.js, Express i Nodemailer

Utwórz nowy projekt `email-sender` i zainstaluj niezbędne moduły: nodemailer, cors i body-parser:

npm install nodemailer cors body-parser

Jeśli nie masz zainstalowanego frameworka Express, również go zainstaluj.

Utwórz aplikację mailer.js obsługującą wysyłkę maila:

const express = require('express');
const nodemailer = require('nodemailer');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
const PORT = process.env.PORT || 3000;

// Dane do konta 
const emailConfig = {
    host: '', // Serwer SMTP
    port: 587, // Port: 465 dla SSL lub 587 dla TLS
    secure: false, // Ustaw na true, jeśli używasz portu 465
    auth: {
        user: '', // Adres e-mail
        pass: '', // Hasło
    },
};

// Middleware
app.use(cors());
app.use(bodyParser.json());

app.post('/send-email', (req, res) => {

    const { name, email, message } = req.body;

    // Konfiguracja transportera
    const transporter = nodemailer.createTransport(emailConfig);

    const mailOptions = {
    
        from: email,
        to: '', // E-mail odbiorcy
        subject: `Nowa wiadomość od ${name}`,
        text: message
        
    };

    transporter.sendMail(mailOptions, (error, info) => {
    
        if(error) {
        
            return res.status(500).send(error.toString());
            
        }
        
        res.status(200).send('E-mail wysłany: ' + info.response);
        
    });
    
});

// Uruchomienie serwera
app.listen(PORT, () => {

    console.log(`App listening on port ${PORT}`);
    
});

Przykładowy formularz

Obsługę wysyłki maila mamy ogarniętą, a więc pora na stworzenie prostego formularza, który będzie wysyłał zapytanie POST do http://localhost:3000/send-email.

Tworzymy komponent contact-form:

ng generate component contact-form

Z następującą zawartością:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent {

  contactForm: FormGroup;
  submissionMessage: string | null = null;

  constructor(private fb: FormBuilder, private http: HttpClient) {
    this.contactForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      message: ['', Validators.required]
      
    });
    
  }

  onSubmit() {
  
    if(this.contactForm.valid) {
      this.http.post('http://localhost:3000/send-email', this.contactForm.value)
        .subscribe(response => {
        
          this.submissionMessage = 'Email wysłany pomyślnie!';
          this.contactForm.reset();
          
        }, error => {
        
          this.submissionMessage = 'Wystąpił problem podczas wysyłania.email' + error;
          
        });
        
    }
    
  }
  
}

Tworzymy nasz formularz HTML w contact-form.component.html:

<div class="contact-form">
  <h2>Formularz kontaktowy</h2>
  
  <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
    <div>
      <label for="name">Imię:</label>
      <input id="name" formControlName="name" required />
    </div>
    
    <div>
      <label for="email">E-mail:</label>
      <input id="email" formControlName="email" required />
    </div>
    
    <div>
      <label for="message">Wiadomość:</label>
      <textarea id="message" formControlName="message" required></textarea>
    </div>
    
    <button type="submit">Wyślij</button>
  </form>

  <div *ngIf="submissionMessage" class="submission-message">
    {{ submissionMessage }}
  </div>
</div>

Style w contact-form.component.css:

.contact-form {

  max-width: 400px;
  margin: auto;
  
}

.contact-form div {

  margin-bottom: 10px;
  
}

.submission-message {

  margin-top: 10px;
  color: green;
  
}

W pliku app.module.ts zaimportuj moduły:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { ContactFormComponent } from './contact-form/contact-form.component';

@NgModule({
  declarations: [
    AppComponent,
    ContactFormComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Aby użyć komponentu wstaw w aplikacji kod:

<app-contact-form></app-contact-form>

To wszystko! Możesz teraz uruchomić i przetestować aplikację.

◢ⓊⓀⓄⒹⓄⓌⒶⓃⒾ◣ blog programistyczny