DEV Community

Cover image for Angular CLI is getting better
Michael De Abreu
Michael De Abreu

Posted on

Angular CLI is getting better

Angular CLI is a great tool for Angular developers, and for years the experience working with it has been a love/hate relationship. I love how easy most things work out of the box, and the experience you get creating components, and services, although it can be overwhelming, because it has so many options, and configurations, you can easily get distracted and confused.

However, there were a couple of things that just didn't work with vanilla Angular CLI, and then you would need to use a meta-framework, a wrapper, or a bash script hook to be able to do these things. You could even convince yourself you don't need them. 1 2

But that is about to change. Introducing:

Server-side Routing Configuration

You know that now if you want to prerender a route with URL params you need to create a text file to tell Angular what URLs will it prerender? Well, with the introduction of the PR#28346 we will be able to do things like configuring routes with dynamic params to be pre-rendered and even configure a fallback in case it hasn't.

const serverRoutes: ServerRoute[] = [
  {
    path: '/product/:id',
    renderMode: RenderMode.Prerender,
    async getPrerenderParams() {
      const dataService = inject(ProductService);
      const ids = await dataService.getIds(); // Assuming this returns ['1', '2', '3']
      return ids.map(id => ({ id })); // Generates paths like: [{ id: '1' }, { id: '2' }, { id: '3' }]
    }
  }
];
Enter fullscreen mode Exit fullscreen mode

This will be part of the release of Angular 19, which will be released in mid-November.

Even if we need to wait for official documentation, the PR lets us see an excellent API to work with, and maybe we can eliminate the need for a pre-script, or a meta-framework.

Environment variables-ish

Currently, Angular doesn't support environment variables, not even from the environment itself, not from an environment file, like a .env, however, with the introduction of the PR#28362 that might change.

And I say it might because I want to be optimistic about this, but it doesn't look like it. The PR doesn't give us much information like the SSR Routing does. But it definitively lets us see that it won't be supporting environment variables directly, but it will introduce a new option called --define. And we'll see how that works.

ng build --define "BUILD_TIME=$(date)"
Enter fullscreen mode Exit fullscreen mode

This will also be part of Angular 19, so we won't wait much until this is available.

That's all folks!

When we are closer to the date, I'll try to update you about this, and maybe we can create an app or something to see how much of an improvement these features really are.

Having been the original requestor for a way to be able to create a server-side Route configuration does create some bias in me about this, but it also makes me realize why people don't choose Angular as its first option. I mean, other frameworks have had these features for years, and they are really easy to use, but when we wanted to use them in Angular, you would need to create several hacks and workarounds to be able to do something similar.

Hopefully, things like these and the Signal API change some minds about Angular, because I think it's a great framework that doesn't get the love it deserves.

Top comments (0)