Angular Dev Webserver mit SSL unter Windows 11 betreiben

In bestimmten Projekten ist es notwendig, auch in der lokalen Entwicklungsumgebung HTTPS zu verwenden, zum Beispiel, wenn das Angular-Frontend mit einem ASP.NET Core Backend kommuniziert, das HTTPS voraussetzt, oder wenn Funktionen wie Secure Cookies, OAuth2 oder CORS mit "secure"-Kontext getestet werden sollen.

Visual Studio erleichtert dies, indem es beim ersten Start eines ASP.NET Core Projekts automatisch ein selbstsigniertes Entwicklungszertifikat erzeugt und es dem Zertifikatspeicher des aktuellen Benutzers als vertrauenswürdig hinzufügt. Dieses Zertifikat lässt sich auch für den Angular Development Server (ng serve) nutzen, um dort SSL zu aktivieren.

Voraussetzungen

• Windows 11
• PowerShell 7 oder höher installiert
• Ein ASP.NET Core Projekt wurde bereits mit Visual Studio gestartet (damit das Dev-Zertifikat erzeugt wurde)

Schritt 1: Entwicklungszertifikat exportieren

Damit das Angular CLI das Zertifikat nutzen kann, muss das Zertifikat als key.pem und cert.pem exportiert werden. Dies geschieht am einfachsten per PowerShell:

PowerShell-Skript: Exportiere ASP.NET Core Development-Zertifikat

$ErrorActionPreference = 'Stop';

# Zielpfade
$exportPath = 'C:\DEIN-PROJEKLT\certificates';
$keyPath = Join-Path $exportPath 'key.pem';
$certPath = Join-Path $exportPath 'cert.pem';

Write-Host 'Entwicklungszertifikat ermitteln';

# Thumbprint des Zertifikats abrufen
# Es handelt sich dabei um einen Fließtext
$certsCheckOutput = dotnet dev-certs https --check;

# Regex zum extrahieren des Fingerprint
$thumbrint = [regex] ': ([\w]+) -';
$certificateIdMatch = $thumbrint.Matches($certsCheckOutput);


if($certificateIdMatch.Groups.Length -eq 0) {
    Write-Error 'Entwicklungszertifikat-Fingerprint konnte nicht ermittelt werden';
    return 1;
}

Write-Host "Entwicklungszertifikat laden"

# Id des Zertifikates
$certificateId = $certificateIdMatch.Groups[1];

Write-Host "ID: $certificateId"

# Zertifikat abrufen
$cert = Get-ChildItem -Path Cert:\CurrentUser\My |
    Where-Object { $_.HasPrivateKey -and $_.Thumbprint -eq $certificateId } |
    Sort-Object NotAfter -Descending |
    Select-Object -First 1

if(!$cert) {
    Write-Error 'Es wurde kein Entwicklungszertifikat gefunden für $certificateId';
    return 1;
}

Write-Host "Zertifikat gefunden: $($cert.Subject)"

Write-Host 'Zertifikate erstellen'

# Privaten Key lesen
$RSACng = [System.Security.Cryptography.X509Certificates.RSACertificateExtensions]::GetRSAPrivateKey($cert);

# Zertifikate erstellen
$RSACng.ExportPkcs8PrivateKeyPem() | Set-Content -Path $keyPath -Encoding ascii
Write-Host "Zertifikat $keyPath wurde erstellt"

$cert.ExportCertificatePem() |  Set-Content -Path $certPath -Encoding ascii
Write-Host "Zertifikat $certPath wurde erstellt"

Schritt 2: Angular Dev Server mit SSL starten

Der Angular Dev Server kann mit den Parametern --ssl, --ssl-key und --ssl-cert gestartet werden.

ng serve  --ssl --ssl-key certificates/key.pem --ssl-cert certificates/cert.pem

FAQ

Was passiert, wenn ich kein Zertifikat sehe?
Starte ein beliebiges ASP.NET Core Projekt in Visual Studio, das HTTPS nutzt. Visual Studio erzeugt dann automatisch ein Entwicklungszertifikat.

Alternative kann der Befehl dotnet dev-certs https --trust ausgeführt werden.