title: PrimeNG components wrong import path
body: <p>I'm newbie to Angular, I've followed <a href="http://www.javainuse.com/angular/angular2_primehello" rel="nofollow noreferrer">This</a> tutorial and succeed getting the results. Now I've tried to add calendar component by following <a href="https://www.primefaces.org/primeng/#/calendar" rel="nofollow noreferrer">This</a> instructions -  but i can't get the right import path....</p>
  
  <p>Here is what it's looks like <a href="https://i.stack.imgur.com/fxDY8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fxDY8.png" alt="enter image description here"></a></p>
  
  <p>I'm getting the following error :</p>
  
  <pre><code>Error: Uncaught (in promise): Error: Template parse errors:
  Can't bind to 'ngModel' since it isn't a known property of 'p-calendar'.
  1. If 'p-calendar' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
  2. If 'p-calendar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
   ("&lt;h1&gt;PrimeNG Hello World&lt;/h1&gt;
      &lt;p-calendar [ERROR -&gt;][(ngModel)]="value"&gt;&lt;/p-calendar&gt;
  
      &lt;input type="text" pInputText placeholder="Please enter your n"): UserAppComponent@1:16
      at resolvePromise (zone.js:418)
      at resolvePromise (zone.js:403)
      at zone.js:451
      at ZoneDelegate.invokeTask (zone.js:225)
      at Zone.runTask (zone.js:125)
      at drainMicroTaskQueue (zone.js:357)
      at XMLHttpRequest.ZoneTask.invoke (zone.js:297)
  </code></pre>
  
  <p>Here is my app.component.ts :</p>
  
  <pre><code>     import {Component, ViewEncapsulation} from '@angular/core';
          import {ConfirmationService, Message} from "primeng/components/common/api";
          import {CalendarModule} from "primeng/components/calendar/calendar"; // path not working
          import {ButtonModule} from 'primeng/primeng'; // path not working
  
  
          @Component({
              selector: 'app',
              template: `&lt;h1&gt;PrimeNG Hello World&lt;/h1&gt;
              &lt;p-calendar formControlName="date"&gt;&lt;/p-calendar&gt; // the calendar component
              &lt;input type="text" pInputText placeholder="Please enter your name"
                     (change)="onChangeEvent($event)" /&gt;
              &lt;button pButton type="text"
                      (click)="getReponse()" icon="fa-check" label="Check"&gt;&lt;/button&gt;
  
              &lt;p&gt;
  
                  &lt;p-confirmDialog width="400"&gt;&lt;/p-confirmDialog&gt;`,
              providers:  [ConfirmationService]
          })
          export class UserAppComponent {
              name: string;
              checkUserInput: string;
  
              constructor(private checkResponseService: ConfirmationService) {}
  
              onChangeEvent({target}){
                  this.name = target.value;
              }
  
              getReponse(){
  
                  this.checkResponseService.confirm({
                      message: ` Hi ${this.name}, is this your first PrimeNG program?`,
                      header: 'Greeting',
                      icon: 'fa fa-question-circle',
                      accept: () =&gt; {
  
                          this.checkUserInput = this.name + " responded " + "This is his first PrimeNG Program";
                      },
                      reject: () =&gt; {
                          this.checkUserInput = this.name + " responded " + "This is not his first PrimeNG Program";
                      }
                  });
              }
          }
  </code></pre>
  
  <p>I can't figure out why the path wrong...since this path is correct </p>
  
  <pre><code>    import {ConfirmationService, Message} from 
      "primeng/components/common/api";
  </code></pre>
  
  <p>I simply replace the path with "calendar/calendar"</p>