我们做开发时必然要安装组件库，angular的组件库十分丰富，primeng就是其中之一。
primeng这个库还是比较强大的，但缺点是版本兼容性不咋地，安装时由于版本不一致导致的各种报错，很容易让你怀疑人生。
package.json
我的angular版本是8，相应的primeng也只能装对应的版本。
{
"name": "prime",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.0.1",
"@angular/cdk":"^8.0.2",
"@angular/common": "~8.0.1",
"@angular/compiler": "~8.0.1",
"@angular/core": "~8.0.1",
"@angular/forms": "~8.0.1",
"@angular/platform-browser": "~8.0.1",
"@angular/platform-browser-dynamic": "~8.0.1",
"@angular/router": "~8.0.1",
"chart.js": "^2.8.0",
"core-js": "^3.8.0",
"font-awesome": "^4.7.0",
"primeicons": "^1.0.0",
"primeng": "^8.0.0",
"quill": "^1.3.6",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.6",
"@angular/cli": "~8.0.6",
"@angular/compiler-cli": "~8.0.3",
"@angular/language-service": "~8.0.3",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
}
}
大家对照这份清单安装，如果报错的话，就按报错信息安装对应的依赖库。
报错信息
我在安装的时候遇到了这个问题：
ERROR in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js
Module not found: Error: Can't resolve 'core-js/proposals/reflect-metadata' in 'D:\app2\prime\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models'
大概是说core-js里面的reflect-metadata文件没找到，去node_module找了一下确实没找见这个文件，我的解决办法是卸载掉core-js重新安装最新版本，如果能找到报错的文件，那就ok了。
然后还遇到这个这个问题：
ERROR in node_modules/@angular/cdk/bidi/dir.d.ts(26,9): error TS1086: An accessor cannot be declared in an ambient context.
一看便知是@angular/cdk这个库出问题了，我当时是直接按照文档安装的：
npm install @angular/cdk --save
但这么做会给你安装最新版的（11），容易造成跟现有angular版本（8）冲突，解决办法就是指定安装8这个版本。
cdk是与弹出层有关的模块，如select，dropdown，picker等，在弹出来的时候自动创建覆盖全局的cdk，挂载在body下面，需要点击cdk才能关闭已打开的下拉。
cdk虽然是angular自带的模块，但是脚手架默认却不会安装，因为它不是核心模块，手动安装就涉及到版本号问题，这个有点坑。。。
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"prime": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/prime",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "prime:build"
},
"configurations": {
"production": {
"browserTarget": "prime:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "prime:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "prime:serve"
},
"configurations": {
"production": {
"devServerTarget": "prime:serve:production"
}
}
}
}
}},
"defaultProject": "prime"
}
我们可以在angular的配置文件配置一下styles选项，注入primeng相关的样式。
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations'
import {DropdownModule} from 'primeng/dropdown';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
DropdownModule,
BrowserAnimationsModule,
NoopAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
primeng的每个功能不是组件而是模块，这里我引入了dropdown这个模块，需要在imports引入。不过这个模块还需要依赖其他模块，都需引入。
app.component.ts
import { Component } from '@angular/core';
import {SelectItem} from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'prime';
cars: SelectItem[];
selectedCar: string;
constructor() {
this.cars = [
{label: 'Audi', value: 'Audi'},
{label: 'BMW', value: 'BMW'},
{label: 'Fiat', value: 'Fiat'},
{label: 'Ford', value: 'Ford'},
{label: 'Honda', value: 'Honda'},
{label: 'Jaguar', value: 'Jaguar'},
{label: 'Mercedes', value: 'Mercedes'},
{label: 'Renault', value: 'Renault'},
{label: 'VW', value: 'VW'},
{label: 'Volvo', value: 'Volvo'},
];
}
}
app.component.html
<p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}">
<!--选中的项-->
<ng-template let-item pTemplate="selectedItem">
<span style="color:red;">{{item.label}}</span>
</ng-template>
<!--列表项-->
<ng-template let-car pTemplate="item">
<div style="color:darkgreen;">{{car.label}}</div>
</ng-template>
</p-dropdown>
<p>选中的项是：{{selectedCar}}</p>
网友评论