Skip to main content

Migrating an Angular app to Analog

An existing Angular Single Page Application can be configured to use Analog using a schematic/generator for Angular CLI or Nx workspaces.

Analog is compatible with Angular v15 and above.

Using a Schematic/Generator

First, install the @analogjs/platform package:

npm install @analogjs/platform --save-dev

Next, run the command to set up the Vite config, update the build/serve targets in the project configuration, move necessary files, and optionally set up Vitest for unit testing.

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

For Nx projects:

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

Updating Global Styles and Scripts

If you have any global scripts or styles configured in the angular.json, move them inside the head tag in the 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>