angular - 使用 angular 2 和 prime ng

Question

我正在尝试将 primeng 库包含到我的项目中

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>

编译没有错误，但我的控制台抛出错误为

我认为这是版本不匹配的原因，但我无法确定与 angular 2 匹配的 primeng 版本列表

非常感谢您的帮助。

Answer 1

你必须包含ReactiveFormsModule

imports: [ 
   ReactiveFormsModule 

],

更新:您没有将 AboutComponent 添加到声明中

 declarations: [
    AppComponent, AboutComponent
  ]