{"action":"created","issue":{"url":"https://api.github.com/repos/oferh/ng2-completer/issues/70","repository_url":"https://api.github.com/repos/oferh/ng2-completer","labels_url":"https://api.github.com/repos/oferh/ng2-completer/issues/70/labels{/name}","comments_url":"https://api.github.com/repos/oferh/ng2-completer/issues/70/comments","events_url":"https://api.github.com/repos/oferh/ng2-completer/issues/70/events","html_url":"https://github.com/oferh/ng2-completer/issues/70","id":185797360,"number":70,"title":"Template parse Error in angular cli project","user":{"login":"pakbaz","id":4333815,"avatar_url":"https://avatars.githubusercontent.com/u/4333815?v=3","gravatar_id":"","url":"https://api.github.com/users/pakbaz","html_url":"https://github.com/pakbaz","followers_url":"https://api.github.com/users/pakbaz/followers","following_url":"https://api.github.com/users/pakbaz/following{/other_user}","gists_url":"https://api.github.com/users/pakbaz/gists{/gist_id}","starred_url":"https://api.github.com/users/pakbaz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pakbaz/subscriptions","organizations_url":"https://api.github.com/users/pakbaz/orgs","repos_url":"https://api.github.com/users/pakbaz/repos","events_url":"https://api.github.com/users/pakbaz/events{/privacy}","received_events_url":"https://api.github.com/users/pakbaz/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-10-27T22:36:11Z","updated_at":"2016-10-28T15:34:51Z","closed_at":null,"body":"I am trying to use this in my angular 2 Cli project. I think I have everything setup correctly.\r\nHere is what my app module look like:\r\n```\r\nimport {BrowserModule} from '@angular/platform-browser';\r\nimport {CommonModule} from '@angular/common';\r\nimport {NgModule} from '@angular/core';\r\nimport {HttpModule} from '@angular/http';\r\nimport {FormsModule} from '@angular/forms';\r\nimport {RouterModule} from \"@angular/router\";\r\n\r\nimport 'rxjs/Rx';\r\n\r\n\r\n//Material Design Lite\r\nimport {MdlModule} from \"angular2-mdl\";\r\n\r\n//Angular2 Grid\r\nimport {NgGridModule} from \"angular2-grid\";\r\n\r\n\r\nimport {AppComponent} from \"./app.component\";\r\nimport {routing} from \"./app.routing\";\r\n\r\nimport { WidgetsModule } from './widgets/widgets.module';\r\nimport { PageHeaderModule } from './page-header/page-header.module';\r\nimport { Ng2CompleterModule } from \"ng2-completer\";\r\n\r\nimport {\r\n  AppConstants, UserService}\r\n  from \"./shared\";\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    CommonModule,\r\n    Ng2CompleterModule,\r\n    FormsModule,\r\n    HttpModule,\r\n    RouterModule.forRoot([], {useHash: false}),\r\n    routing,\r\n    MdlModule,\r\n    NgGridModule,\r\n    WidgetsModule,\r\n    PageHeaderModule\r\n  ],\r\n  providers: [\r\n    AppConstants,\r\n    UserService\r\n  ],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {\r\n}\r\n```\r\n\r\nand here is what my component looks like (used the example):\r\n\r\n```\r\nimport { Component} from '@angular/core';\r\nimport { CompleterService, CompleterData } from 'ng2-completer';\r\n\r\n\r\n@Component({\r\n  selector: 'oxy-search-box',\r\n  // templateUrl: './search-box.component.html',\r\n  template: '<ng2-completer [(ngModel)]=\"searchStr\" [dataService]=\"dataService\" [minSearchLength]=\"0\"></ng2-completer>',\r\n  styleUrls: ['./search-box.component.scss']\r\n})\r\nexport class SearchBoxComponent{\r\n  private searchStr: string;\r\n  private dataService: CompleterData;\r\n  private searchData = [\r\n    { color: 'red', value: '#f00' },\r\n    { color: 'green', value: '#0f0' },\r\n    { color: 'blue', value: '#00f' },\r\n    { color: 'cyan', value: '#0ff' },\r\n    { color: 'magenta', value: '#f0f' },\r\n    { color: 'yellow', value: '#ff0' },\r\n    { color: 'black', value: '#000' }\r\n  ];\r\n\r\n  constructor(private completerService: CompleterService) { \r\n    this.dataService = completerService.local(this.searchData, 'color', 'color'); \r\n  }\r\n\r\n}\r\n```\r\n\r\n\r\nI get this error when I run the project\r\n\r\n```\r\nzone.js:388Unhandled Promise rejection: Template parse errors:\r\nCan't bind to 'ngModel' since it isn't a known property of 'ng2-completer'.\r\n1. If 'ng2-completer' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.\r\n2. If 'ng2-completer' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message.\r\n (\"<ng2-completer [ERROR ->][(ngModel)]=\"searchStr\" [dataService]=\"dataService\" [minSearchLength]=\"0\"></ng2-completer>\"): SearchBoxComponent@0:15\r\nCan't bind to 'dataService' since it isn't a known property of 'ng2-completer'.\r\n1. If 'ng2-completer' is an Angular component and it has 'dataService' input, then verify that it is part of this module.\r\n2. If 'ng2-completer' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message.\r\n (\"<ng2-completer [(ngModel)]=\"searchStr\" [ERROR ->][dataService]=\"dataService\" [minSearchLength]=\"0\"></ng2-completer>\"): SearchBoxComponent@0:39\r\nCan't bind to 'minSearchLength' since it isn't a known property of 'ng2-completer'.\r\n1. If 'ng2-completer' is an Angular component and it has 'minSearchLength' input, then verify that it is part of this module.\r\n2. If 'ng2-completer' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message.\r\n (\"<ng2-completer [(ngModel)]=\"searchStr\" [dataService]=\"dataService\" [ERROR ->][minSearchLength]=\"0\"></ng2-completer>\"): SearchBoxComponent@0:67\r\n'ng2-completer' is not a known element:\r\n1. If 'ng2-completer' is an Angular component, then verify that it is part of this module.\r\n2. If 'ng2-completer' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message. (\"[ERROR ->]<ng2-completer [(ngModel)]=\"searchStr\" [dataService]=\"dataService\" [minSearchLength]=\"0\"></ng2-comple\"): SearchBoxComponent@0:0 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:\r\nCan't bind to 'ngModel' since it isn't a known property of 'ng2-completer'.\r\n1. If 'ng2-completer' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.\r\n2. If 'ng2-completer' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message.\r\n (\"<ng2-completer [ERROR ->][(ngModel)]=\"searchStr\" [dataService]=\"dataService\" [minSearchLength]=\"0\"></ng2-completer>\"): SearchBoxComponent@0:15\r\nCan't bind to 'dataService' since it isn't a known property of 'ng2-completer'.\r\n1. If 'ng2-completer' is an Angular component and it has 'dataService' input, then verify that it is part of this module.\r\n2. If 'ng2-completer' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message.\r\n (\"<ng2-completer [(ngModel)]=\"searchStr\" [ERROR ->][dataService]=\"dataService\" [minSearchLength]=\"0\"></ng2-completer>\"): SearchBoxComponent@0:39\r\nCan't bind to 'minSearchLength' since it isn't a known property of 'ng2-completer'.\r\n1. If 'ng2-completer' is an Angular component and it has 'minSearchLength' input, then verify that it is part of this module.\r\n2. If 'ng2-completer' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message.\r\n (\"<ng2-completer [(ngModel)]=\"searchStr\" [dataService]=\"dataService\" [ERROR ->][minSearchLength]=\"0\"></ng2-completer>\"): SearchBoxComponent@0:67\r\n'ng2-completer' is not a known element:\r\n1. If 'ng2-completer' is an Angular component, then verify that it is part of this module.\r\n2. If 'ng2-completer' is a Web Component then add \"CUSTOM_ELEMENTS_SCHEMA\" to the '@NgModule.schemas' of this component to suppress this message. (\"[ERROR ->]<ng2-completer [(ngModel)]=\"searchStr\" [dataService]=\"dataService\" [minSearchLength]=\"0\"></ng2-comple\"): SearchBoxComponent@0:0\r\n    at TemplateParser.parse (http://localhost:4200/main.bundle.js:18562:19)\r\n    at RuntimeCompiler._compileTemplate (http://localhost:4200/main.bundle.js:41134:51)\r\n    at http://localhost:4200/main.bundle.js:41039:83\r\n    at Set.forEach (native)\r\n    at compile (http://localhost:4200/main.bundle.js:41039:47)\r\n    at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:107184:26)\r\n    at Zone.run (http://localhost:4200/main.bundle.js:107066:43)\r\n    at http://localhost:4200/main.bundle.js:107454:57\r\n    at ZoneDelegate.invokeTask (http://localhost:4200/main.bundle.js:107217:35)\r\n    at Zone.runTask (http://localhost:4200/main.bundle.js:107106:47)\r\n```"},"comment":{"url":"https://api.github.com/repos/oferh/ng2-completer/issues/comments/256953003","html_url":"https://github.com/oferh/ng2-completer/issues/70#issuecomment-256953003","issue_url":"https://api.github.com/repos/oferh/ng2-completer/issues/70","id":256953003,"user":{"login":"gelliott181","id":3580685,"avatar_url":"https://avatars.githubusercontent.com/u/3580685?v=3","gravatar_id":"","url":"https://api.github.com/users/gelliott181","html_url":"https://github.com/gelliott181","followers_url":"https://api.github.com/users/gelliott181/followers","following_url":"https://api.github.com/users/gelliott181/following{/other_user}","gists_url":"https://api.github.com/users/gelliott181/gists{/gist_id}","starred_url":"https://api.github.com/users/gelliott181/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gelliott181/subscriptions","organizations_url":"https://api.github.com/users/gelliott181/orgs","repos_url":"https://api.github.com/users/gelliott181/repos","events_url":"https://api.github.com/users/gelliott181/events{/privacy}","received_events_url":"https://api.github.com/users/gelliott181/received_events","type":"User","site_admin":false},"created_at":"2016-10-28T15:34:51Z","updated_at":"2016-10-28T15:34:51Z","body":"I too use the CLI at version beta.16 currently. I'm able to import and use the component with all your properties, however I import inside of a submodule because I lazy load. Do you only have an app.module?"}}
{"actor":{"display_login":"gelliott181"}}