Angular 4 directive error: Can't resolve all parameters for directive

17,550

private items is missing a type parameter. Angular can't create component instances if it can't resolve all parameters to providers.
Resolving to providers only works with parameter types and @Inject(...) annotations.

If you don't want items to be injected, remove the parameter. There is no situation where you would need to create a component instance yourself to pass the parameter explicitely.

Share:
17,550
P.S.
Author by

P.S.

Updated on June 16, 2022

Comments

  • P.S.
    P.S. about 2 years

    I'm totally new to Angular and trying to inject basic structural directive from Angular guide. Here is my directive:

    import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
    
    @Directive({
      selector: '[pcDropdown]'
    })
    export class DropdownDirective {
      private hasView = false;
    
      constructor(
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef,
        private items
      ) { }
    
      @Input() set pcDropdown(condition: boolean) {
        if (!condition && !this.hasView) {
          this.viewContainer.createEmbeddedView(this.templateRef);
          this.hasView = true;
        } else if (condition && this.hasView) {
          this.viewContainer.clear();
          this.hasView = false;
        }
      }
    }
    

    I'm trying to inject it in my TradeModule:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { SharedModule } from '../shared/shared.module';
    import { TradeComponent } from './trade.component';
    import { DropdownDirective } from '../dropdown.directive/dropdown.directive';
    
    @NgModule({
      imports: [
        CommonModule,
        SharedModule
      ],
      declarations: [TradeComponent, DropdownDirective],
      exports: [DropdownDirective]
    })
    export class TradeModule { }
    

    And use the following part of HTML in my TradeComponent's template:

    ...
    <p *pcDropdown="true">
      TEST
    </p>
    ...
    

    But I'm getting the error:

    Uncaught Error: Can't resolve all parameters for DropdownDirective: ([object Object], [object Object], ?).

    Webstorm is also underlying my @Directive decorator and say the following:

    Angular: Can't resolve all parameters for DropdownDirective in /home/commercialsuicide/Desktop/my-app/src/client/app/dropdown.directive/dropdown.directive.ts: ([object Object], [object Object], ?)

    enter image description here

    It also say that my pcDropdown input is unused:

    enter image description here

    Need to say, that i already saw this answer and emitDecoratorMetadata is already set to true in tsconfig.json.

    Please, point where I misspelled or forgot to include something in my code.

    Many thanks