使用角度2和素数

Question

I am trying to include primeng library into my project with

package.json

"dependencies": {
    "@angular/common": "~2.2.3",
    "@angular/compiler": "~2.2.3",
    "@angular/core": "~2.2.3",
    "@angular/forms": "~2.2.3",
    "@angular/http": "~2.2.3",
    "@angular/platform-browser": "~2.2.3",
    "@angular/platform-browser-dynamic": "~2.2.3",
    "@angular/router": "~3.2.3",
    "@types/jquery": "^2.0.34",
    "angular2-highcharts": "^0.4.1",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.1.1",
    "ng2-bootstrap": "^1.4.0",
    "ng2-bs3-modal": "^0.10.4",
    "ng2-popover": "0.0.12",
    "primeng": "^2.0.4",
    "rxjs": "5.0.0-rc.4",
    "toastr-ng2": "^3.2.5",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },

angular-cli.json

 "styles": [
            "./app/app.scss",
            "../node_modules/primeng/resources/primeng.min.css",
            "../node_modules/primeng/resources/themes/omega/theme.css",
            "../node_modules/font-awesome/scss/font-awesome.scss"
        ],
        "scripts": [
            "../node_modules/jquery/jquery.min.js",
            "../node_modules/tether/dist/js/tether.min.js",
            "../node_modules/bootstrap/dist/js/bootstrap.min.js"
        ],

app.module.ts

import {SpinnerModule} from 'primeng/primeng';

NgModule

@NgModule({
  imports: [
    AboutModule,
    ApiHelperModule,
    CoreModule,
    HomeModule,
    PostModule,
    StyleGuideModule,
    ToDoModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    SpinnerModule,
    RouterModule.forRoot(CoreRoutes)
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    {
      provide: AuthHttp,
      useFactory: getAuthHttp,
      deps: [Http]
    }
  ],
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})

about.component.ts

import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SpinnerModule } from 'primeng/primeng';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html'
})
export class AboutComponent implements OnInit {
  val:any;
  constructor() { 
    this.val = 25;

  }

  ngOnInit() {
  }
}

about.component.html

 <p-spinner [(ngModel)]="val"></p-spinner>

There is no error in compilation, but my console throws the error as

I assume like this is becos of version mismatch, but i couldnt figure the primeng version list that matches to angular 2

Your help is highly appreciated.

Answer 1

You have to include ReactiveFormsModule

imports: [ 
   ReactiveFormsModule 

],

Update : you did not add AboutComponent to declarations

 declarations: [
    AppComponent, AboutComponent
  ]