TypeError: e.findHostDirectiveDefs is not a function

[jessemorton]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

18.2.13

Description

I have a directive that's shared among multiple codebases, so it's in a separate repo and NgModule (standalone false currently). Up to and including Angular 18, it's always worked fine. In Angular 19 and 20, my dev configuration works fine for ng serve but when doing serve or build with production configuration, navigating to a route that uses that directive will cause an error.

TypeError: e.findHostDirectiveDefs is not a function

Minimal Reproduction

Doing ng serve --configuration=dev avoids the error, while ng serve or ng build and navigating to a route with the directive causes the error.

The directive in question has the structure of:

import { Directive, Input, OnInit, ElementRef, Renderer2 } from '@angular/core';

import octicons from 'octicons';

@Directive({
    selector: '[octicon]',
    standalone: false
})
export class OcticonDirective implements OnInit {

    @Input() octicon: string;
    @Input() color: string;
    @Input() width: number = 15;
    @Input() height: number;

    constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

    ngOnInit(): void {
        const el: HTMLElement = this.elementRef.nativeElement;

        el.innerHTML = octicons[this.octicon].toSVG();

        const icon: Node = el.firstChild;

        this.renderer.setStyle(icon, 'vertical-align', 'middle');

        if (this.color) {
            this.renderer.setStyle(icon, 'fill', this.color);
        }

        if (this.width) {
            this.renderer.setStyle(icon, 'width', this.width);

            // reasonable default for height if not specified
            if (!this.height) {
              this.renderer.setStyle(icon, 'height', this.width);
            }
        }

        if (this.height) {
          this.renderer.setStyle(icon, 'height', this.height);
        }
    }

}

Where this is a private package I'm using, I'm unable to share a reproduction of the error directly, but it seems like a relatively simple change is needed in Angular: rather than checking u.findHostDirectiveDefs !== null it seems to need to additionally check typeof u.findHostDirectiveDefs !== 'undefined'

Exception or Error

`TypeError: e.findHostDirectiveDefs is not a function`

In the bundled code, the problem seems to stem from the `findHostDirectiveDefs` being compared to null in order to safety check it before calling, but where it's undefined for the directive in question, it passes the safety check but then errors.


function b1(e, n, t, r) {
    let i = n.length;
    e.findHostDirectiveDefs(e, n, r),
    t.set(e, [i, n.length - 1])

Your Environment

Angular CLI: 19.2.15
Node: 20.19.3
Package Manager: npm 10.8.2
OS: darwin arm64

Angular: 19.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.15
@angular-devkit/build-angular   19.2.15
@angular-devkit/core            19.2.15
@angular-devkit/schematics      19.2.15
@angular/cdk                    19.2.19
@angular/cli                    19.2.15
@schematics/angular             19.2.15
rxjs                            7.8.2
typescript                      5.8.3
zone.js                         0.15.1

Anything else relevant?

No response

[JoostK]

I suspect you are precompiling the shared code with a different version of Angular than the version of the Angular runtime being used, which isn't supported and is likely to break.

Without a reproduction, though, we cannot really tell.

[jessemorton]

You were close - it wasn't precompiled, but the Angular dependencies of the package were different. Updating resolves the issue. Thanks for the pointer. It surprised me that ng serve would work in dev mode nevertheless if the prod mode breaks.

[JoostK]

Could be due to preserveSymlinks differences; with preserveSymlinks enabled you'll avoid stepping outside of the originating directory tree, therefore always resolving module specifiers from a single node_modules directory. Without preserving symlinks, though, a symlink will be rewritten to its realpath equivalent and from there on will module specifiers be resolved from that new perspective, seeing a different copy of @angular/core.