Carlos Cifuentes
AngularJS → Angular reference

DI annotations ($inject, array syntax) in modern Angular

String-based annotations disappear. Angular identifies dependencies by class or InjectionToken, so minification cannot break them.

Before · AngularJS
// array syntax
app.controller('UserCtrl', ['$http', 'UserService',
  function ($http, UserService) { /* ... */ }]);

// $inject property
function OrderService($http, API_URL) { /* ... */ }
OrderService.$inject = ['$http', 'API_URL'];
app.service('OrderService', OrderService);
After · Angular
@Injectable({ providedIn: 'root' })
export class OrderService {
  private http = inject(HttpClient);
  private apiUrl = inject(API_URL);
}

@Component({ selector: 'app-user', templateUrl: './user.component.html' })
export class UserComponent {
  private users = inject(UserService);
  private analytics = inject(AnalyticsService, { optional: true });
}

What changes

  • The array syntax, the $inject property and ng-annotate are no longer needed.
  • inject() requests a dependency in a field initializer, a constructor or a factory function, and TypeScript checks its type.
  • Optional dependencies use inject(Token, { optional: true }) instead of manual $injector.has() checks.

Migration tip. Turn on ng-strict-di in the legacy app before the migration starts. It surfaces missing annotations that only fail in minified builds, and the hybrid build will minify that code.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn