StaticInjectorError(AppModule)[NgForOf -> TemplateRef]

Question

I created a Directive in Angular7 but when i need to use that it show me this error :

Error: StaticInjectorError(AppModule)[NgForOf -> TemplateRef]: StaticInjectorError(Platform: core)[NgForOf -> TemplateRef]: NullInjectorError: No provider for TemplateRef! Error: StaticInjectorError(AppModule)[NgForOf -> TemplateRef]: StaticInjectorError(Platform: core)[NgForOf -> TemplateRef]:

I create this directive in SharedModule :

@NgModule({
  declarations: [FilderrorComponent, UploadfileComponent, ImageComponent, ValidatePermissionDirective],
  imports: [
    CommonModule
  ],
  exports: [ FilderrorComponent, UploadfileComponent, ImageComponent, ValidatePermissionDirective]
})
export class SharedModule {

    static forRoot(): ModuleWithProviders {
      return {
        ngModule: SharedModule,
        providers: [ FilderrorComponent, UploadfileComponent, ImageComponent , ValidatePermissionDirective]
      };
  }
}

and this is my Directive:

@Directive({
  selector: '[appValidatePermission]'
})
export class ValidatePermissionDirective implements OnInit {

  show: boolean;
  constructor(private templateRef: TemplateRef<any>,
              private viewContainerRef: ViewContainerRef
    ,         private dynamic: DynamicPermissionService) { }

  // tslint:disable-next-line:no-input-rename
  @Input() AccessName: string;

  ngOnInit() {
    this.ValidatePemission();
    if (this.show) {
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainerRef.clear();
    }
  }
  ValidatePemission() {
    console.log('AccessName : ', this.AccessName);
    const find = this.dynamic.dynamicModel.find(x =>
      !! x.actionsVM.find(z => z.actionEnglishName === this.AccessName));
    console.log(find);
    if (find) {
        console.log(true);
        this.show = true;
      } else {
        console.log(false);
        this.show = false;
      }
  }
}

and i define the shareModule in AdminModule :

@NgModule({
  declarations: [],
  imports: [
    SharedModule,
    AdminpanelRoutingModule,

  ],
  providers: [Toolkit, { provide: HTTP_INTERCEPTORS, useClass: RequestInterceptor, multi: true }]
})
export class AdminpanelModule { }

and I use Directive in HTML :

<span [appValidatePermission]="CreateRole">
  <router-outlet></router-outlet>
</span>

Whats The Problem??? How Can I Solve That?

Change `````` to `````` .. Remove the [] around the directive name in template.. — Maniraj Murugan, Jun 11 '19 at 07:32
I am not sure that this is related with the issue but while using the directive in template, you should use the selector name alone and it should not be enclosed with ```[ ]``` .. — Maniraj Murugan, Jun 11 '19 at 07:36

score 0 · Answer 1 · answered Jun 11 '19 at 07:37

0

I think the problem comes from the fact that templateRef is null. Try intializing it before using it maybe

answered Jun 11 '19 at 07:37

Valentin C

1
3

how can i intializing that ?? – mr-dortaj Jun 11 '19 at 07:38
Did you try new TemplateRef() ? – Valentin C Jun 11 '19 at 07:47
Also I just saw that [this post](https://stackoverflow.com/questions/36266453/how-to-use-templateref) may help you with TemplateRef. – Valentin C Jun 11 '19 at 07:50
`TemplateRef` is abstract class . i can not initial that ? – mr-dortaj Jun 11 '19 at 07:52
Ok, sorry about this. Did the post i linked helped you ? I also found [this blog](https://medium.com/@adrianfaciu/creating-structural-directives-in-angular-ff17211c7b28). I hope it will help you, I don't have much time to read it entirely though, sorry. – Valentin C Jun 11 '19 at 07:56

StaticInjectorError(AppModule)[NgForOf -> TemplateRef]

1 Answers1