p-tree module error

[billyjacobs]

I am getting the familiar missing module error.
Can't bind to 'value' since it isn't a known property of 'p-tree'.
1. If 'p-tree' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'p-tree' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I have received this error many times in the past and I understand why the error is caused normally. However in this case I am baffled.

I am using angular 5, angular cli 1.5, I tried primeng 5.2.0-rc2 and then downgraded to ^4.1.0 hoping it was an issue with the latest version.

I am trying to use primeNG's tree component. I imported the TreeModule into my components module in the Imports section (e.g. myComponent.module.ts Imports: [TreeModule] ) as specified in the documentation and as I have done countless times with other components. Following other people online with the same issue, In my component (e.g. myComponent.component.ts) I have unnecessarily imported Tree. I imported TreeNode as well because I am creating my datasource TreeNode[] in the component.

I also have imported TreeModule and SharedModule in my app.module which is not necessary normally but was grasping at straws.

Here is my component's module.ts current imports and how I would normally use a component. I removed any related imports from app.module.ts. The only imports are now in my
mycomponent.module.ts

Code: Select all

 
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EventAddDialogComponent } from './event-add-dialog.component';
import {
  MatDialogModule, MatButtonModule, MatNativeDateModule, MatDatepickerModule,
  MatInputModule, MatCheckboxModule, MatSelectModule
} from '@angular/material';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { TreeModule, SharedModule } from 'primeng/primeng';


@NgModule({
  imports: [
    CommonModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatButtonModule,
    FormsModule,
    ReactiveFormsModule,
    MatDialogModule,
    MatCheckboxModule,
    MatSelectModule,
    DateInputsModule,
    TreeModule,
    SharedModule
  ],
  declarations: [EventAddDialogComponent],
  entryComponents: [EventAddDialogComponent]
})
export class EventAddDialogModule { }

mycomponent.component.ts

Code: Select all

import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef, MatSelectChange } from '@angular/material';
import { FormBuilder, Validators } from '@angular/forms';
import { FormGroup } from '@angular/forms';
import { ActivityType, Activity } from '../../types/activity-type';

import { IGrouping } from '../../types/grouping';
import { TreeNode } from 'primeng/primeng';


export interface IAddEventDialogData {
  startTime: Date;
  endTime: Date;
  ownerGroups: IGrouping[];
  activityTypes: ActivityType[];
  activities: Activity[];
  displayLevels?: any[];
  eventColor?: string;
}
export interface IAddEventDialogResult {
  accepted: boolean;
  eventTitle?: string;
  startTime?: Date;
  endTime?: Date;
  isAllDay: boolean;
  location: string;
  facility: string;
  activityId: string;
  description?: string;
  displayLevelId: string;
  eventColor: string;
}

@Component({
  selector: 'app-event-add-dialog',
  templateUrl: '../event-add-dialog.component.html',
  styleUrls: ['../event-add-dialog.component.css']
})
export class EventAddDialogComponent implements OnInit {
  eventFormGroup: FormGroup;
  eventEditorData: IAddEventDialogData;
  availableActivites: Activity[];
  ownerTreeViewData: TreeNode[];
  selectedOwners: TreeNode[];
  constructor( @Inject(MAT_DIALOG_DATA) data: IAddEventDialogData,
    private dialogRef: MatDialogRef<EventAddDialogComponent>,
    private formBuilder: FormBuilder) {
      this.eventEditorData = data;
      this.ownerTreeViewData = this.createTreeNodes(this.eventEditorData.ownerGroups);
    }

  createTreeNodes(groups: IGrouping[]): TreeNode[] {
    const nodes: TreeNode[] = groups.map(g => {
      if (g.children.length < 1) {
        return {
          label: g.groupName,
          expandedIcon: 'fa-folder-open',
          collapsedIcon: 'fa-folder'
        };
      } else {
        return {
          label: g.groupName,
          expandedIcon: 'fa-folder-open',
          collapsedIcon: 'fa-folder',
          childeren: this.createTreeNodes(g.children)
        };
      }
    });
    return nodes;
  }
  ngOnInit() {
    this.eventFormGroup = this.formBuilder.group({
      eventTitle: ['', Validators.required],
      startDate: [this.eventEditorData.startTime, Validators.required],
      endDate: [this.eventEditorData.endTime, Validators.required],
      startTime: this.eventEditorData.startTime,
      endTime: this.eventEditorData.endTime,
      isAllDay: [false, Validators.required],
      location: [''],
      facility: [''],
      activityId: null,
      description: ['', Validators.required],
      displayLevelId: [1, Validators.required],
      eventColor: this.eventEditorData.eventColor
    });
  }
  onOk() {
    const startDate: Date = this.eventFormGroup.value['startDate'];
    const endDate: Date = this.eventFormGroup.value['endDate'];
    const startTime: Date = this.eventFormGroup.value['startTime'];
    const endTime: Date = this.eventFormGroup.value['endTime'];
    if (this.eventFormGroup.value['isAllDay'] === true) {
      startTime.setHours(0);
      startTime.setMinutes(0);
      startTime.setSeconds(0);
      startTime.setMilliseconds(0);
      endTime.setHours(23);
      endTime.setMinutes(59);
      endTime.setSeconds(59);
      endTime.setMilliseconds(999);
    }

    const result: IAddEventDialogResult = {
      accepted: true,
      eventTitle: this.eventFormGroup.value['eventTitle'],
      startTime: new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), startTime.getHours(), startTime.getMinutes(), startTime.getSeconds()),
      endTime: new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate(), endTime.getHours(), endTime.getMinutes(), endTime.getSeconds()),
      isAllDay: this.eventFormGroup.value['isAllDay'],
      location: this.eventFormGroup.value['location'],
      facility: this.eventFormGroup.value['facility'],
      activityId: this.eventFormGroup.value['activityId'],
      description: this.eventFormGroup.value['description'],
      displayLevelId: this.eventFormGroup.value['displayLevelId'],
      eventColor: this.eventFormGroup.value['eventColor']
    };
    // TODO:
    this.dialogRef.close(result);
  }
  onCancel() {
    // TODO:
    this.dialogRef.close();
  }
  setAvailableActivities(event: MatSelectChange) {
    this.availableActivites = this.eventEditorData.activities.filter(a => a.activityTypeId === event.value);
  }
}

mycomponent.component.html

Code: Select all

  <div [style.display]="'flex'" [style.flex-flow]="'row'" [style.justify-content]="'space-evenly'" [style.align-items]="'center'">
    <mat-form-field>
      <textarea matInput placeholder="Description" formControlName="description"></textarea>
    </mat-form-field>
    <p-tree [value]="ownerTreeViewData" selectionMode="checkbox" [(selection)]="selectedOwners"></p-tree>
  </div>

Any assistance would be greatly appreciated.

Thanks,

Billy Jacobs

[billyjacobs]

I figured out the problem. As it usually turns out the world still makes sense:

I have 2 components that share the same html file (Add/Edit) They have different component.ts and module.ts files. I updated the shared html file by adding adding the p-tree tag.

I then imported the TreeModule into my add.module.ts but not my edit.module.ts file. Since both components share the same html file the TreeModule must be imported in both add/edit modules. Once I added it to the edit module the problem went away.