Blog

🔧 Angular 22 Is Phasing Out @Injectable; The New @service() Decorator Is Here

April 27, 2026

I wonder if anyone else tracks framework releases anymore. Angular 22 just landed a commit that simplifies dependency injection with a new decorator. Here is what you need to know.

With AI taking over a lot of the coding discourse, it is easy to miss actual framework updates. Angular is still evolving, and version 22 brings a change that affects how we write services. The team merged a commit introducing a new @service() decorator that aims to replace the verbose @Injectable() we have used for years.

The Problem with @Injectable()

The @Injectable() decorator has been part of Angular since the early days. You mark a class with it, and Angular knows how to inject it elsewhere. The pattern relied on constructor injection:

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {}
}

It works. But the decorator came with baggage. Options like useClass, useValue, useFactory, and useExisting gave developers flexibility most never touched. The majority of services just needed providedIn: 'root' and nothing else. The flexibility became clutter.

Angular's move to signals and the inject() function already shifted how we think about dependencies. Instead of constructor injection, you can now do:

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);
}

This approach lets you group inputs, outputs, and injections in a way that feels more organized. But the @Injectable() decorator remained, carrying all its legacy options.

Enter @service()

Angular 22 introduces @service() as a leaner alternative. The philosophy is lagom: just the right amount, nothing more.

@service()
export class UserService {
  private http = inject(HttpClient);
}

That is it. The decorator marks your class as injectable and defaults to providedIn: 'root'. No constructor injection by default, which nudges you toward the inject() function pattern. The API is deliberately laconic.

If you need to opt out of root provision, there is an autoProvided property:

@service({ autoProvided: false })
export class ScopedService {
  private store = inject(DataStore);
}

When autoProvided is false, you handle registration yourself, typically in a module or component providers array. The naming might seem odd at first. Why not providedIn: 'none'? The team apparently chose autoProvided to make the default behavior clearer. When you use @service() with no arguments, you get automatic root provision. When you set autoProvided: false, you explicitly disable it.

Comments in Templates

Angular 22 also brings something developers have wanted for a while: comments inside HTML element tags. Consider this template:

<div
  // Sets the container width
  /* Sets the container styling */
  attr1="value1"
  /*
    Additional attributes
    for accessibility
  */
  attr2="value2"
></div>

You can now add both single-line and multi-line comments directly within an element's attribute list. It is a small feature, but it helps when you have complex templates with many attributes. Documentation lives closer to what it describes.

Why This Matters

Angular has been simplifying for several releases now. Standalone components removed the need for NgModules in many cases. Signals replaced zone-based change detection patterns. The inject() function made constructor injection optional. Now @service() continues that trajectory.

If you have been working with Angular, the shift toward simplicity is noticable. When I design SaaS architectures or help teams scale their frontends, reducing boilerplate means faster onboarding and fewer places for bugs to hide. Whether you are a founding engineer building an MVP or a staff engineer maintaining a large codebase, less ceremony is welcom.

The @Injectable() decorator is not going away immediately. You can still use it. But for new services, @service() offers a cleaner path. The Angular team clearly wants developers to embrace signals and property-based injection. The new decorator is built around those patterns.

📊 Want to reduce your AI coding costs? I put together a report on AI Coding Cost Optimization that covers how to get better results while spending less on tokens. Use code MEDIUMSAVES20 for 20% off. Subscribers to the Vibe Coding Newsletter save 50%

Migration Considerations

If your codebase uses @Injectable() extensively, there is no rush to migrate. The decorator will remain supported. When you do decide to update:

Services using providedIn: 'root' map directly to @service()
Services with custom provision strategies need autoProvided: false plus manual registration
Constructor injection patterns should move to inject() calls

The Angular team has not announced deprecation timelines. But the direction is clear. New projects benefit from starting with @service() and the inject() function from day one.

This update also affects how AI coding assistants generate Angular code. If your LLM still produces @Injectable() boilerplate, it might be time to update your prompts or system instructions. The new decorator is simpler, which should mean fewer tokens and cleaner output.

🎯 Preparing for Angular interviews or want to sharpen your framework knowledge? Check out the Angular Interview Questions Flashcards. They cover core concepts from dependency injection to signals, and they are a great way to review before your next technical discussion

What Is Next

Angular 22 is on track for release soon. The @service() decorator and template comments are part of a larger push to modernize the framework. Keep an eye on the official Angular blog for release announcements.

For those already using Angular's newer patterns like signals and standalone components, version 22 continues the trend. For teams still on older Angular versions, this is another reason to plan an upgrade path.

Sources

Angular GitHub Commit: Add @service() decorator