Error NG0312 while trying to alias inputs via host directive #48951
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
No
Description
It seems like an @Input() that was renamed via @Input("myCustomName") can't be added to the host directives inputs array.
I was just following the official Introducing the Directive Composition API in Angular v15 video on YouTube.
Here's an example using the CdkContextMenuTrigger directive:
import { CdkContextMenuTrigger } from '@angular/cdk/menu';
import { Directive } from '@angular/core';
@Directive({
standalone: true,
selector: '[myTriggerFor]',
hostDirectives: [
{
directive: CdkContextMenuTrigger,
inputs: [
'cdkContextMenuTriggerFor: myTriggerFor',
'cdkContextMenuPosition',
'cdkContextMenuTriggerData',
],
outputs: ['cdkContextMenuOpened', 'cdkContextMenuClosed'],
},
],
})
export class MyMenuTriggerDirective {}And a simplified version of using it:
import { Component } from '@angular/core';
import { MyMenuTriggerDirective } from './my-menu.directive';
@Component({
selector: 'app-root',
template: `
<button [myTriggerFor]="name">trigger</button>
<ng-template #name></ng-template>
`,
standalone: true,
imports: [MyMenuTriggerDirective],
})
export class AppComponent {}Doing so result in the errors below. Or is this working as intended?
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
ERROR Error: NG0312: Cannot alias output cdkContextMenuOpened of host directive CdkContextMenuTrigger to cdkContextMenuOpened, because it already has a different output with the same public name.
at validateMappings (core.mjs:12831:23)
at validateHostDirective (core.mjs:12812:5)
at Object.findHostDirectiveDefs (core.mjs:12727:17)
at findDirectiveDefMatches (core.mjs:11190:46)
at resolveDirectives (core.mjs:10953:29)
at elementStartFirstCreatePass (core.mjs:13659:27)
at Module.ɵɵelementStart (core.mjs:13699:9)
at AppComponent_Template (app.component.ts:7:5)
at executeTemplate (core.mjs:10534:9)
at renderView (core.mjs:10356:13)
ERROR Error: Uncaught (in promise): Error: NG0312: Cannot alias output cdkContextMenuOpened of host directive CdkContextMenuTrigger to cdkContextMenuOpened, because it already has a different output with the same public name.
Error: NG0312: Cannot alias output cdkContextMenuOpened of host directive CdkContextMenuTrigger to cdkContextMenuOpened, because it already has a different output with the same public name.
at validateMappings (core.mjs:12831:23)
at validateHostDirective (core.mjs:12812:5)
at Object.findHostDirectiveDefs (core.mjs:12727:17)
at findDirectiveDefMatches (core.mjs:11190:46)
at resolveDirectives (core.mjs:10953:29)
at elementStartFirstCreatePass (core.mjs:13659:27)
at Module.ɵɵelementStart (core.mjs:13699:9)
at AppComponent_Template (app.component.ts:7:5)
at executeTemplate (core.mjs:10534:9)
at renderView (core.mjs:10356:13)
at resolvePromise (zone.js:1214:31)
at zone.js:1285:17
at _ZoneDelegate.invokeTask (zone.js:409:31)
at core.mjs:23999:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:23999:36)
at _ZoneDelegate.invokeTask (zone.js:408:60)
at Object.onInvokeTask (core.mjs:24300:33)
at _ZoneDelegate.invokeTask (zone.js:408:60)
at Zone.runTask (zone.js:178:47)
at drainMicroTaskQueue (zone.js:588:35)
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 15.1.4
Node: 18.12.1
Package Manager: npm 8.19.2
OS: linux x64
Angular: 15.1.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1501.4
@angular-devkit/build-angular 15.1.4
@angular-devkit/core 15.1.4
@angular-devkit/schematics 15.1.4
@angular/cli 15.1.4
@schematics/angular 15.1.4
rxjs 7.8.0
typescript 4.9.5
Anything else?
No response