refactor(router): replace Optional with inject() flags

arturovt · AndrewKushnir · commit 7724a9460d3e · 2025-11-10T09:48:32.000-08:00
Replace `@Optional() link: RouterLink` constructor parameter with
`link = inject(RouterLink, {optional: true})` to enable tree-shaking
of the `Optional` decorator and its factory scaffolding.

Bundle size reduction: `Optional` is a runtime value created by
`makeParamDecorator()`. Even in production builds, ESBuild and other
bundlers must keep their factory code because it is referenced via
`Optional`. With `inject()`, this class is no longer referenced,
allowing it and the `makeParamDecorator` scaffolding to be tree-shaken
when unused elsewhere.

Note: This updates the constructor signature but should not be
considered a breaking change. Angular's official guidance is that
directives, components, and pipes should be instantiated by the
framework, not by user code. Directly calling `new RouterLinkActive(...)`
is an unsupported pattern that goes against Angular's design principles.
diff --git a/goldens/public-api/router/index.api.md b/goldens/public-api/router/index.api.md
@@ -839,7 +839,7 @@ export { RouterLink as RouterLinkWithHref }
 
 // @public
 export class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit {
-    constructor(router: Router, element: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef, link?: RouterLink | undefined);
+    constructor(router: Router, element: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef);
     ariaCurrentWhenActive?: 'page' | 'step' | 'location' | 'date' | 'time' | true | false;
     // (undocumented)
     get isActive(): boolean;
@@ -857,7 +857,7 @@ export class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<RouterLinkActive, "[routerLinkActive]", ["routerLinkActive"], { "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; }; "ariaCurrentWhenActive": { "alias": "ariaCurrentWhenActive"; "required": false; }; "routerLinkActive": { "alias": "routerLinkActive"; "required": false; }; }, { "isActiveChange": "isActiveChange"; }, ["links"], never, true, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<RouterLinkActive, [null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RouterLinkActive, never>;
 }
 
 // @public
diff --git a/packages/router/src/directives/router_link_active.ts b/packages/router/src/directives/router_link_active.ts
@@ -13,10 +13,10 @@ import {
   Directive,
   ElementRef,
   EventEmitter,
+  inject,
   Input,
   OnChanges,
   OnDestroy,
-  Optional,
   Output,
   QueryList,
   Renderer2,
@@ -155,12 +155,13 @@ export class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit
    */
   @Output() readonly isActiveChange: EventEmitter<boolean> = new EventEmitter();
 
+  private link = inject(RouterLink, {optional: true});
+
   constructor(
     private router: Router,
     private element: ElementRef,
     private renderer: Renderer2,
     private readonly cdr: ChangeDetectorRef,
-    @Optional() private link?: RouterLink,
   ) {
     this.routerEventsSubscription = router.events.subscribe((s: Event) => {
       if (s instanceof NavigationEnd) {
