--- name: azion-build-with-angular description: >- Create an Angular app from an Azion template, a GitHub repository, or the Azion CLI, and deploy it to an Azion domain. --- # 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](/en/documentation/devtools/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](/en/documentation/platform/applications/) delivers it. To see which other frameworks Azion builds, refer to [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility/). --- Choose your route first. The prerequisites and the deploy procedure that follow switch with this choice. ## Prerequisites - An Azion account. To create one, refer to [Create an account](/en/documentation/fundamentals/creating-account/). **Console** - Access to Azion Console. To sign in, refer to [How to access Azion Console](/en/documentation/guides/platform/account-and-billing/how-to-access-azion-console/). - A GitHub account, which the template form connects when it asks for one. **GitHub** - Access to Azion Console. To sign in, refer to [How to access Azion Console](/en/documentation/guides/platform/account-and-billing/how-to-access-azion-console/). - A GitHub account. - A GitHub repository with an Angular project in it. **CLI** - The Azion CLI, installed and logged in. To set it up, refer to [Azion CLI quickstart](/en/documentation/devtools/cli/quickstart/). - Node.js 18 or later, with npm. - A terminal and a code editor. --- ## 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](/en/documentation/guides/application-development/frameworks/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](/en/documentation/platform/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: 1. **Open the templates** Access [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Find the Angular templates** In **Search by name, framework, or keyword**, enter `Angular`. 3. **Select the template to deploy** 4. **Connect your GitHub account** If the form shows **GitHub Connection**, select **Connect with GitHub** and install the [Azion GitHub App](/en/documentation/guides/application-development/automation/azion-github-app/). 5. **Select a Git Scope** In **Git Scope**, select the scope for the template. 6. **Fill in the settings the template asks for** 7. **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. **GitHub** To deploy an Angular project from your GitHub repository: 1. **Open Import from GitHub** Access [Azion Console](https://console.azion.com/) > **Create** > **Import from GitHub**. 2. **Select the import card** In the **Import from GitHub** tab, select the card. The **Import from GitHub** page opens. 3. **Connect your GitHub account** If no GitHub account is connected yet, select **Connect with GitHub** in **GitHub Connection**. 4. **Select the repository** Select a **Git Scope**, then select the **Repository** with the Angular project. 5. **Name the application** In **General**, enter an **Application Name**. The repository name fills the field first, and the storage bucket and the [function](/en/documentation/platform/functions/) reuse the name you keep. 6. **Select the Angular preset** Set **Preset** to *Angular*. 7. **Set the root directory** In **Root Directory**, keep `/` if the Angular project is at the repository root. 8. **Enter the install command** In **Install Command**, enter `npm install`. 9. **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](/en/documentation/guides/application-development/automation/import-an-existing-project-from-github/). **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: ```bash 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](/en/documentation/devtools/cli/init/). With the *Angular Boilerplate* template, the output is: ```text ? Choose a preset: [Use arrows to move, type to filter] > AI Studio Angular Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript Jekyll Next Nuxt OpenNextJS Preact Qwik React Rustwasm Stencil Svelte Typescript Vitepress Vue Vuepress ? Choose a preset: Angular ? Choose a template: [Use arrows to move, type to filter] > Angular Boilerplate Angular with ButterCMS Starter Project Clean Angular App with Sanity ? Choose a template: Angular Boilerplate Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies … added 867 packages, and audited 868 packages in 35s 199 packages are looking for funding run `npm fund` for details 12 vulnerabilities (2 moderate, 10 high) To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. … [Azion] [Build] › ℹ info Using preset: angular [Azion] [Build] › ✔ success Build completed successfully with only azion.config [Azion] [IaC] › ✔ success Manifest generated successfully at /my-site/.edge/manifest.json If you want to start a local development server later, run 'azion dev' Make sure to change to the new working directory before running building or deploying your project If you want to deploy your application later, run 'azion deploy' Make sure to change to the new working directory before running building or deploying your project Your 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](/en/documentation/devtools/cli/azion-config-js/). To build the app, go to the project folder and run `azion build`: ```bash cd my-site azion build ``` Azion Bundler runs `ng build` with the `angular` preset and writes the compiled app to `dist`: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset angular … [Azion] [Build] › ℹ info Using preset: angular [Azion] [Pre-Build] › ℹ info Starting pre-build... … [Angular] › ℹ info > angular-boilerplate@22.0.2 build > ng build --output-path=./dist [Angular] › ℹ info ❯ Building... [Angular] › ℹ info ✔ Building... [Angular] › ℹ info Initial chunk files | Names | Raw size | Estimated transfer size main-JHJQWKMP.js | main | 218.66 kB | 59.77 kB polyfills-5CFQRCPP.js | polyfills | 34.59 kB | 11.33 kB styles-5INURTSO.css | styles | 0 bytes | 0 bytes | Initial total | 253.24 kB | 71.11 kB Application bundle generation complete. [1.759 seconds] - 2026-01-01T12:00:00.833Z [Angular] › ℹ info Output location: /my-site/dist [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "angular" preset. [Azion] [Build] › ℹ info Starting build... [Azion] [Build] › ✔ success Build completed successfully [Azion] [Post-Build] › ℹ info Starting post-build... [Azion] [Post-Build] › ✔ success Post-build completed successfully [Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX [Azion] [IaC] › ✔ success Manifest generated successfully at /my-site/.edge/manifest.json Your Application was built successfully ``` To deploy the app, run `azion deploy` from the project folder: ```bash 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](/en/documentation/devtools/cli/deploy/). To try the app on your machine first, refer to [Azion CLI dev](/en/documentation/devtools/cli/dev-command/). 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](/en/documentation/devtools/cli/link-command/). --- ## 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 compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility.md): See the frameworks and presets that Azion builds besides Angular. - [Azion CLI deploy](/en/documentation/devtools/cli/deploy.md): Read the deploy output and the flags that change a deploy. - [Import a project from GitHub](/en/documentation/guides/application-development/automation/import-an-existing-project-from-github.md): Set every field of the GitHub import, variables included. - [azion.config.js](/en/documentation/devtools/cli/azion-config-js.md): Change the bucket, cache, and rules that the Angular preset generates.