December, 2024 | Angular Newsletter

Happy holidays! Ideas of Angular resolutions for 2025

December 26, 2024December 26, 2024 Alain Chautard

This week, we get back to the 3-2-1 format of the newsletter. I’m posting a few essential articles to revisit, updates to know about, and one question to ponder – all ideas of good practices to adopt in 2025:

Three short articles to revisit:

eslint is a nice and easy way to ensure you (and your team) are following best practices and not using shortcuts or making any mistakes in your code. Learn the basics of eslint here, how to fine-tune your eslint config so it fits your needs (you can disable rules you don’t like), and also how to use extra rules for RxJs to favor the use of the async pipe, for instance.

Two Angular updates:

Ng-conf has released more videos from the 2024 event for free on YouTube. This is another good way to improve your Angular skills during the Holiday season! We’re still waiting for a date for the 2025 event.
The Angular team started creating a playlist of short videos (30 secs each) about Angular 19—a nice and fast way to learn about some of the new features of Angular 19.

One question to think about:

What’s your current Angular version? The end-of-year slowdown could be an excellent opportunity to find some time to upgrade to v19. Use my upgrade guide here for more info.

Running initialization code when Angular loads + router data updates

December 12, 2024December 12, 2024 Alain Chautard

I’m posting a few essential articles to revisit, updates to know about, and one question to ponder this week:

Three articles to revisit and associated updates with Angular 19

When we need to initialize an application with server data (environment variables, for instance), we can use Angular’s APP_INITIALIZER. For more information, revisit this tutorial about APP_INITIALIZER.

Angular 19 introduced a new syntax for this feature. This function must be called in the array of providers of your app bootstrap as follows:

You can return an Observable or a Promise from your init function. The official documentation is here.

Another interesting feature expanded in recent versions is the ability to pass data to components using the router. I wrote about router state and how to use resolvers in the past, and even how to map router data to component inputs.

With Angular 19, we can pass data to a RouterOutlet to share information between parent and child components as follows:

One question to ponder this week:

How do you pass data to your routed components? Do you use any of the features described above or just inject services in the routed component? Is there anything you could improve in your architecture using these tools?

Angular 19: Standalone updates

December 4, 2024December 4, 2024 Alain Chautard

Angular 19 is a massive release with lots of improvements and new features. I covered all signal-related updates earlier. Today, let’s focus on what’s changed with standalone features in the framework.

First, standalone is the new default! In Angular 19, you don’t need the standalone: true option in your decorators, that’s the default value now. Instead, you want to use standalone: false for features that are not standalone and belong to a ngModule.

When you upgrade to Angular 19, ng update will automatically remove standalone : true where you use it and use standalone: false where needed. No need to worry about it!

Second, the Angular compiler will warn you when you have unused imports in your standalone components. This is great to help keep your code clean:

TS-998113: Imports array contains unused imports [plugin angular-compiler]

src/app/user/users.component.ts:9:27:
9 │ imports: [UserComponent, UnusedComponent],Code language: HTTP (http)

Finally, if you want to make sure all your components are standalone, you can use the new "strictStandalone": true option in the angularCompilerOptions.

Then, if your create a non-standalone feature, you’ll get an error:
TS-992023: Only standalone components/directives are allowed when 'strictStandalone' is enabled.