Angular mit ESP32 SPIFFS / ESPAsyncWebserver zum Laufen bringen

Das Hauptproblem bei der Verwendung von Angular-Web-UIs ist, dass die resultierenden Dateien zu groß werden, daher schlägt das Builden des Dateisystem-Images mit SPIFFS_write error(-10001): File system is full. fehl.

Mit diesen Tipps konnte ich eine Angular-PrimeNG-App in ein 4MB-Flash-ESP32-Modul ohne jede benutzerdefinierte Partitionstabelle und ohne andere verrückte Hacks einpassen! Sogar die Schriftarten & PrimeNG-Icons passen leicht in die SPIFFS, wobei insgesamt nur 380 kB der ungefähren 1.5 MB verbraucht werden.

Dateikomprimierung

Der wichtigste Tipp ist, dass Sie die Dateien aus dem Angular-dist-Verzeichnis einfach mit gzip -9 komprimieren können und ESPAsyncWebserver automatisch die Dekomprimierung übernimmt!

Dies ist meine platformio.ini:

[env:esp32dev]
platform = espressif32
platform_packages = framework-arduinoespressif32 @ https://github.com/espressif/arduino-esp32.git#2.0.3
board = esp32dev
framework = arduino
board_build.filesystem = littlefs
lib_deps =
    esphome/AsyncTCP-esphome@^1.2.2
    esphome/ESPAsyncWebServer-esphome@^2.1.0
    ArduinoJSON@6.19.1
upload_speed = 460800
monitor_speed = 115200

Dies ist mein Angular-Build-Skript:

#!/bin/sh
ng build --aot --build-optimizer --optimization --progress --output-hashing none
gzip -9 dist/**/*

Hier sage ich ESPAsyncWebserver (beachten Sie, dass Sie den esphome-Fork verwenden sollten), Dateien statisch zu servieren:

server.serveStatic("/", SPIFFS, "/www/").setDefaultFile("index.html");

Weitere Tipps

Um sich das Leben mit dem Datenverzeichnis, das sowohl Angular-Dateien als auch andere Dateien enthält, leichter zu machen, siehe Angular-Projekt-dist-Verzeichnis mit PlatformIO-SPIFFS-Datenverzeichnis verlinken

Sie können purgecss verwenden, aber Komprimierung funktioniert so gut, dass es das Risiko, versehentlich einige CSS-Regeln zu entfernen, die manuell auf die Whitelist gesetzt werden müssen, nicht wirklich wert ist. Vor der Entdeckung, wie gut Komprimierung funktionierte, begann ich, CSS-Regeln manuell aus der PrimeNG-Theme-Datei zu entfernen. Das funktionierte, aber die SPIFFS war immer noch nicht klein genug.

Oft können Sie Platz sparen, indem Sie Dateien löschen.

Zum Beispiel sind primeicons.svg und primeicons.ttf zwei verschiedene Formate mit demselben Inhalt. Beachten Sie, dass einige (insbesondere ältere und einige mobile) Browser nicht alle Formate unterstützen, daher ist es eher riskant, sie zu entfernen, wenn Sie mehrere Plattformen unterstützen müssen.