Astro + Angular

tldr;

Astro is a relatively new, all-in-one framework with the goal of creating performant, content-focused websites. The great part is that while there is some new Astro specific syntax you can learn, you can also bring your own frontend. Until recently, Angular was the exception to that rule. But with the release of standalone components to the Angular framework, you can now pair Astro and Angular together.

Background

We won’t go fully into what Astro is in this blog post, but we’ll at least get into the basics. On June 8th, 2021, a blog post was released by the Astro team explaining that their goal was to provide a web framework that shipped less JavaScript to the browser. It is described as similar to a static site generator, similar to Jekyll or Eleventy. After the build step, most JavaScript is removed from the page, and all that’s left is the HTML. In the case that JavaScript is needed for some functionality, Astro loads only the necessary JavaScript. The result are sites that are as lightweight and fast as possible. In the time since that blog post was released, a lot of content has been produced. If you’re interested in Astro, you should definitely go read more about it.

To get started with Astro, you only need to run the following command:

npm init astro

A few prompts will be displayed; follow them through to the end and you should have your basic project ready to go. Once the project is completed, you’re ready to go on to the next steps.

Implement Angular and Astro

As mentioned in the intro, Astro allows you to bring your own frontend to build your site. React, Vue, and Svelte have been supported since the beginning. Angular was not available until v14.2, when standalone components were introduced. With that addition to the framework, you can now pair Angular and Astro.

Another thing to be aware of, however, is that Angular’s standalone components don’t work 100% with Astro. For example, inputs to components work but outputs don’t. You’ll need to be aware of this when developing your application.

Now that you have an Astro application, let’s get it working with Angular. You can do that with a single command from your terminal.

npx astro add @analogjs/astro-angular

This command makes changes to the astro.config.mjs file, and installs some Angular dependencies for you to develop your site. There’s one more step needed after this, and that is to create a tsconfig.app.json file. You can find an example here. Add that file into the root of your project.

Let’s continue by creating a component in the src/components folder. Let’s call ours header.component.ts, like for a blog post header. That file, at its very basic configuration, will look like this:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-header',
  standalone: true,
  template: `<div>
    <h1>{{ title }}</h1>
    <p>New Blog Post</p>
  </div>`,
})
export class HeaderComponent {
  @Input() title: string;
}

Now that we have our component, let’s add it to our Astro template, in the src/pages/index.astro file. This will be different from what you’re used to with Angular components. You’ll first need to import the component at the top of the file, inside the pair of triple dashes:

---
import { HeaderComponent } from '../components/header.component';
---

After that, next to some of the other HTML in the astro file, add your new Angular component:

<HeaderComponent title="Angular + Astro" />

If you’ve used React, this will look more familiar. Also, make sure to provide a title as an input.

After adding the component to your page, run the following command and open the site on the provided port:

npm run dev

When you open the page, you should see the content of your new component on the page, wherever it is that you added it.

Conclusion

There is a lot of innovation happening in the Angular community recently, and because of it we are able to move forward and take advantage of new tools that the web development industry has to offer. Astro is beginning to grow, and as Angular developers we can now jump in and participate. I encourage you to go read this article by Brandon Roberts for more information on using Astro and Angular. You can also follow Brandon’s project, Analog, to see more innovation in the Angular community