Directive compile broken when using @Input transform #51424
Description
Which @angular/* package(s) are the source of the bug?
compiler or ng-packagr
Is this a regression?
Not sure, I just tried @input + transform. It's not a regression for our code base.
Description
When a standalone directive in a library uses @Input({ transform: ..}), the compiler output is broken such that the class isn't recognized as a directive, resulting in errors like those listed in the next section, which state that the class is missing an Angular decorator (which is clearly wrong - it has the @Directive decorator).
The bug can be reproduced by:
git clone https://github.com/johncrim/bug-ng16-input-transform
yarn
yarn build:allThe compile error is:
------------------------------------------------------------------------------
Building entry point 'ui-components/sticky'
------------------------------------------------------------------------------
✖ Compiling with Angular sources in Ivy partial compilation mode.
libs/ui-components/sticky/src/Sticky.component.ts:10:5 - error NG2012: Component imports must be standalone components, directives, pipes, or must be NgModules.
10 MirrorWidthDirective
~~~~~~~~~~~~~~~~~~~~
error Command failed with exit code 1.
This error is caused by the use of @Input({transform: ...}) in MirrorWidthDirective. The problem is that the use of the input transform feature breaks the build output: The contents of dist\ui-components\fesm2022\ui-components-mirror-size.mjs show that class MirrorWidthDirective is missing the static ɵdir and ɵfac properties:
let MirrorWidthDirective = class MirrorWidthDirective {
// ... (class properties and methods)
};
__decorate([
Input({ alias: 'ui-mirror-width', required: true, transform: coerceElement })
], MirrorWidthDirective.prototype, "source", void 0);
MirrorWidthDirective = __decorate([
Directive({
selector: '[ui-mirror-width]',
standalone: true,
exportAs: 'ui-mirror-width'
})
], MirrorWidthDirective);The similar directive MirrorHeightDirective is equivalent but omits use of the @Input transform. It is in the same project, but the compiler output (in dist\ui-components\fesm2022\ui-components-mirror-size.mjs) is:
class MirrorHeightDirective {
// ... (class properties and methods)
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: MirrorHeightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: MirrorHeightDirective, isStandalone: true, selector: "[ui-mirror-height]", inputs: { source: ["ui-mirror-height", "source"] }, exportAs: ["ui-mirror-height"], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: MirrorHeightDirective, decorators: [{
type: Directive,
args: [{
selector: '[ui-mirror-height]',
standalone: true,
exportAs: 'ui-mirror-height'
}]
}], propDecorators: { source: [{
type: Input,
args: [{ alias: 'ui-mirror-height', required: true }]
}] } });The second directive can be imported, but the first one can't, b/c the second is recognized as a directive b/c static ɵdir exists.
Please provide a link to a minimal reproduction of the bug
https://github.com/johncrim/bug-ng16-input-transform
Please provide the exception or error you saw
When imported in a component:
error NG2012: Component imports must be standalone components, directives, pipes, or must be NgModules.
or when imported in a module:
error NG6002: 'MirrorWidthDirective ' does not appear to be an NgModule class.
error NG6003: 'MirrorWidthDirective ' does not appear to be an NgModule, Component, Directive, or Pipe class.
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 16.2.0
Node: 18.10.0
Package Manager: yarn 1.22.19
OS: win32 x64
Angular: 16.2.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1602.0
@angular-devkit/build-angular 16.2.0
@angular-devkit/core 16.2.0
@angular-devkit/schematics 16.2.0
@angular/cli 16.2.0
@schematics/angular 16.2.0
ng-packagr 16.2.0
rxjs 7.8.1
typescript 5.1.6
zone.js 0.13.1
Anything else?
No response