Zum Hauptinhalt springen

Migrieren einer Angular-Anwendung zu Analog

Eine bestehende Angular Single Page Application kann mit Hilfe eines Schemas/Generators für Angular CLI oder Nx Workspaces für die Verwendung von Analog konfiguriert werden.

Analog ist kompatibel mit Angular v15 und höher.

Verwendung eines Schemas/Generators​

Installiere zunächst das Paket @analogjs/platform:

npm install @analogjs/platform --save-dev

Führe anschließend den Befehl aus, um die Vite-Konfiguration einzurichten, aktualisiere die Build/Serve-Ziele in der Projektkonfiguration, verschieben die erforderlichen Dateien und richte optional Vitest für Unit-Tests ein.

npx ng generate @analogjs/platform:init --project [your-project-name]

Für Nx-Projekte:

npx nx generate @analogjs/platform:init --project [your-project-name]

Aktualisierung der globalen Stile und Skripte​

Wenn globale Skripte oder Stile in der angular.json konfiguriert sind, verschiebe diese in den head-Tag in der index.html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Analog app</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/src/styles.css" />
  </head>
  <body>
    <app-root></app-root>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>