更新

Question

以下是我安装PrimeNG的步骤：

npm install primeng --save npm install primeui --save

更新 Index.html :(我必须将目录 primeng 和 primeui 从node_modules复制到 assets < / em>文件夹摆脱404 文件未找到错误）

更新 test.component.ts ：

import {Calendar} from '../../assets/primeng/primeng'; .... export class TestComponent { dateValue:string; }

更新 test.component.html ：

<p-calendar formControlName="date"></p-calendar>


结果：页面上没有显示任何内容。

我错过了什么吗？

EDIT1：

我现在认为说使用 angular-cli
安装项目非常重要
如果我将<p-calendar [(ngModel)]="dateValue"></p-calendar>添加到test.component.html，我知道

错误：未捕获（在承诺中）：无法分配给引用或变量！

编辑2：

我刚试过另一个没有使用angular-cli的项目：

<link rel="stylesheet" href="node_modules/primeui/themes/omega/theme.css" /> <link rel="stylesheet" href="node_modules/primeui/primeui-ng-all.min.css" /> .... import {Calendar} from 'primeng/primeng'; .... <p-calendar formControlName="date"></p-calendar>

我添加directives:[Calendar]后，我收到错误：


http://localhost:3000/primeng/primeng 404（未找到）
  错误：错误：加载http://localhost:3000/primeng/primeng（...）
时出现XHR错误（404 Not Found）

Answer 1

将SystemJS中的地图更新为以下内容：

var map = {
 'app':                        'app', // 'dist',
 '@angular':                   'node_modules/@angular',
 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
 'rxjs':                       'node_modules/rxjs',
 'primeng':                    'node_modules/primeng'//<-- add this
};

并将SystemJS中的软件包更新为以下内容：

var packages = {
 'app':                        { main: 'boot.js',  defaultExtension: 'js' },
 'rxjs':                       { defaultExtension: 'js' },
 'angular2-in-memory-web-api': { defaultExtension: 'js' },
 'primeng':                    { defaultExtension: 'js' } //<-- add this
};

要导入，您可以使用：

import {Calendar} from 'primeng/components/calendar/calendar';

或者如果您不关心它是否加载了您可以使用的所有组件：

import {Calendar} from 'primeng/primeng';

如需进一步参考，建议您查看setup of PrimeNG

Answer 2

请参阅documentation页面

的底部

依赖关系 jQuery UI Datepicker和DateTimePicker

所以你必须在你没有嵌入的index.html中嵌入这些行我想是这样尝试使用这个

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

也不要忘记在@component

下的指令列表中列出日历

更新

将primeng的所有css文件从index.html转移到angular-cli.json文件。像这样

"styles": [
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/primeui/primeui-ng-all.min.css"
     ....
  ],

在angular-cli.json文件中移动所有的primeng js文件。

截至目前，primeng的所有组件都在模块中转换，因此我们必须导入主模块文件中的所有组件。（在我的案例中是app.module.ts文件）。

Answer 3

嘿，这是最新的primeng angular cli quickstart项目看看。

https://github.com/primefaces/primeng-quickstart-cli

Answer 4

尝试在index.html中添加primeui-ng-all.min.js

<!-- JS for PrimeUI -->
<script src="node_modules/primeui/primeui-ng-all.min.js"></script>

看看这是否有帮助。

Answer 5

你必须在module.ts文件中添加你的导入，否则Angular会忽略它。

Answer 6

在app.module.ts

中添加导入CalendarModule

@NgModule({  imports: [
CommonModule,
CalendarModule],  declarations: [CarruselComponent],  exports: [    CarruselComponent ]})

Answer 7

这是Primeng安装程序的完整文档：https://www.primefaces.org/primeng/#/setup

这里我们如何添加日历：https://www.primefaces.org/primeng/#/calendar

Answer 8

安装PrimeNG

npm install primeng --save

安装Prime图标

npm install primeicons --save

安装真棒字体

npm install font-awesome --save

安装Angular CDK

npm install @angular/cdk --save

如果现在转到package.json，我们将看到以下primeng依赖项

打开angular.json并在样式部分添加以下内容

"./node_modules/primeicons/primeicons.css",
  "./node_modules/primeng/resources/themes/nova-light/theme.css",
  "./node_modules/primeng/resources/primeng.min.css",

在Angular应用程序中添加PrimeNG组件 要在Angular中添加任何PrimeNG组件，我们将按照以下步骤操作：

参考-https://www.codeusingjava.com/angular/primeng/prime1
参考-https://youtu.be/4Wk4RgYN9ZQ

Angular2添加PrimeNG组件

8 个答案:

更新