Build with Angular
Create an Angular app from an Azion template, a GitHub repository, or the Azion CLI, and deploy it to an Azion domain.
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.
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.
- 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.
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:
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:
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:
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:
Azion Bundler runs ng build with the angular preset and writes the compiled app to dist:
To deploy the app, run azion deploy from the project folder:
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.
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.