Build with Angular

You can put an Angular app on Azion in three ways: deploy a template from Azion Console, import your GitHub repository, or use the Azion CLI. Each route finishes with the app live on an Azion domain.

Azion serves an Angular app as a static application. The ng build step writes the compiled app to ./dist, the deploy copies that folder into a storage bucket, and an application delivers it. To see which other frameworks Azion builds, refer to Frameworks compatibility.

Prerequisites

Console

An Azion account. To create one, refer to Create an account.
Access to Azion Console. To sign in, refer to How to access Azion Console.
A GitHub account, which the template form connects when it asks for one.

CLI

An Azion account. To create one, refer to Create an account.
The Azion CLI, installed and logged in. To set it up, refer to Azion CLI quickstart.
Node.js 18 or later, with npm.
A terminal and a code editor.

GitHub

An Azion account. To create one, refer to Create an account.
Access to Azion Console. To sign in, refer to How to access Azion Console.
A GitHub account.
A GitHub repository with an Angular project in it.

Angular templates

An Angular template is a complete starter project that Azion builds and deploys for you. In the Console route, you pick one of these:

Template	Use
Angular Boilerplate	Starter project
Angular with ButterCMS Starter Project	Starter project

Angular Boilerplate has a guide of its own, linked in the table. For more information on the other template, refer to Azion Marketplace. In the CLI route, the template picker of azion init shows every template of the Angular preset.

Deploy the app

Every route builds the Angular project and creates the Azion resources that serve it. Use the panel that matches the route you chose:

Console

To deploy an Angular template from Azion Console:

Open the templates

Access Azion Console > Create > Templates.

Find the Angular templates

In Search by name, framework, or keyword, enter Angular.

Select the template to deploy

Connect your GitHub account

If the form shows GitHub Connection, select Connect with GitHub and install the Azion GitHub App.

Select a Git Scope

In Git Scope, select the scope for the template.

Fill in the settings the template asks for

Select Deploy

The deploy page opens with the Deploy Log, which follows the build. On success, the page shows Successfully created!, the domain URL, and a Manage button that opens the application.

CLI

To create the project, run azion init with a project name, then select Angular in the preset picker and a template in the template picker:

azion init --name my-site --auto -y

With -y, the command installs the dependencies. With --auto, it does not ask whether to start a local development server or to deploy. For the questions it asks without these options, refer to Azion CLI init. With the Angular Boilerplate template, the output is:

Text

01? Choose a preset: [Use arrows to move, type to filter]

02> AI Studio

03 Angular

04 Astro

05 Docusaurus

06 Eleventy

07 Emscripten

08 Gatsby

09 Hexo

10 Hono

11 Hugo

12 Javascript

13 Jekyll

14 Next

15 Nuxt

16 OpenNextJS

17 Preact

18 Qwik

19 React

20 Rustwasm

21 Stencil

22 Svelte

23 Typescript

24 Vitepress

25 Vue

26 Vuepress

27? Choose a preset: Angular

28? Choose a template: [Use arrows to move, type to filter]

29> Angular Boilerplate

30 Angular with ButterCMS Starter Project

31 Clean Angular App with Sanity

32? Choose a template: Angular Boilerplate

34Fetching selected template...

36Template successfully fetched

37Template successfully configured

38Installing application dependencies

39…

40added 867 packages, and audited 868 packages in 35s

41199 packages are looking for funding

42run `npm fund` for details

4312 vulnerabilities (2 moderate, 10 high)

45To address all issues (including breaking changes), run:

46 npm audit fix --force

48Run `npm audit` for details.

49…

50[Azion] [Build] › ℹ info Using preset: angular

51[Azion] [Build] › ✔ success Build completed successfully with only azion.config

52[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-site/.edge/manifest.json

53If you want to start a local development server later, run 'azion dev'

54Make sure to change to the new working directory before running building or deploying your project

55If you want to deploy your application later, run 'azion deploy'

56Make sure to change to the new working directory before running building or deploying your project

57Your application my-site was initialized successfully

The project lands in a my-site folder. Its azion.config.cjs sets the angular preset and uploads ./dist to a storage bucket that workloads can only read. The same file adds a rule named Redirect to index.html, which rewrites routes to /index.html so that Angular handles routing in the browser. For every setting in the file, refer to azion.config.js.

To build the app, go to the project folder and run azion build:

Shell

01cd my-site

02azion build

Azion Bundler runs ng build with the angular preset and writes the compiled app to dist:

Text

01Building your Application. This process may take a few minutes

02Running build step command:

04$ npx --yes @aziontech/bundler@1.1.4 build --preset angular

05…

06[Azion] [Build] › ℹ info Using preset: angular

07[Azion] [Pre-Build] › ℹ info Starting pre-build...

08…

09[Angular] › ℹ info

10> angular-boilerplate@22.0.2 build

11> ng build --output-path=./dist

13[Angular] › ℹ info ❯ Building...

15[Angular] › ℹ info ✔ Building...

17[Angular] › ℹ info Initial chunk files | Names | Raw size | Estimated transfer size

18main-JHJQWKMP.js | main | 218.66 kB | 59.77 kB

19polyfills-5CFQRCPP.js | polyfills | 34.59 kB | 11.33 kB

20styles-5INURTSO.css | styles | 0 bytes | 0 bytes

22 | Initial total | 253.24 kB | 71.11 kB

24Application bundle generation complete. [1.759 seconds] - 2026-01-01T12:00:00.833Z

26[Angular] › ℹ info Output location: <project-dir>/my-site/dist

28[Azion] [Pre-Build] › ℹ info Pre-build completed successfully

29[Azion] [Build] › ℹ info Using built-in handler from "angular" preset.

30[Azion] [Build] › ℹ info Starting build...

31[Azion] [Build] › ✔ success Build completed successfully

32[Azion] [Post-Build] › ℹ info Starting post-build...

33[Azion] [Post-Build] › ✔ success Post-build completed successfully

34[Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX

35[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-site/.edge/manifest.json

36Your Application was built successfully

To deploy the app, run azion deploy from the project folder:

azion deploy

azion deploy uploads the project and opens the Console page that tracks the deploy, and it prints that page’s URL for the case where no browser opens. At the end, it prints the URL of the app’s domain. For the full output and the flags that change a deploy, refer to Azion CLI deploy.

To try the app on your machine first, refer to Azion CLI dev. For an Angular project you already have, run azion link in its folder and select the Angular preset. For more information, refer to Azion CLI link.

GitHub

To deploy an Angular project from your GitHub repository:

Open Import from GitHub

Access Azion Console > Create > Import from GitHub.

Select the import card

In the Import from GitHub tab, select the card. The Import from GitHub page opens.

Connect your GitHub account

If no GitHub account is connected yet, select Connect with GitHub in GitHub Connection.

Select the repository

Select a Git Scope, then select the Repository with the Angular project.

Name the application

In General, enter an Application Name. The repository name fills the field first, and the storage bucket and the function reuse the name you keep.

Select the Angular preset

Set Preset to Angular.

Set the root directory

In Root Directory, keep / if the Angular project is at the repository root.

Enter the install command

In Install Command, enter npm install.

Select Deploy

The deploy page opens under the title Deploy: and the application name, and the Deploy Log follows the build. On success, the page shows Successfully created! and the domain URL.

To set Variables or any other field of the import form, refer to Import a project from GitHub.

Check the site

Each route ends with the URL of the app’s Azion domain, shaped like https://xxxxxxxxxx.map.azionedge.net. The Console deploy page shows the URL, and azion deploy prints it as its last step. Open the URL in a browser to load the Angular app.

The first deploy can take several minutes to answer from every location; later deploys take about two minutes. A location that has not received the app yet returns a 404 page with the text There's nothing here yet. When you get that page, wait, then request the URL again.

Next steps

Frameworks compatibilitySee the frameworks and presets that Azion builds besides Angular.Azion CLI deployRead the deploy output and the flags that change a deploy.Import a project from GitHubSet every field of the GitHub import, variables included.azion.config.jsChange the bucket, cache, and rules that the Angular preset generates.