Primeng时间表与Angular2 webpack [英] Primeng schedule with Angular2 webpack

问题描述

我将使用Primeng时间表（ http://www.primefaces.org/primeng /＃/ schedule ）基于Angular2 webpack启动器（ https：// github的.com / AngularClass / angular2-的WebPack起动）。

由于Primeng计划取决于 fullcalendar.js 这是一个jQuery插件，我尝试加载 fullcalendar 和jQuery通过webpack。我在这里遵循示例（ https://github.com/cagataycivici/angular2-webpack-starter）。
$ b

在 package.json 中，我将下面的设置添加到devDependencies

 fullcalendar：^ 2.7.2，
jquery ：^ 2.2.4，
jquery-ui：^ 1.10.5，
  

并将以下设置添加到 vendor.js

  import '！脚本的jQuery /距离/ jquery.min.js'; 
 import'script！moment / moment.js'; 
 import'script！fullcalendar / dist / fullcalendar.js'; 
  

但问题在于，Primeng日程表并未在网页中呈现，即使< p-schedule>< / p-schedule> 标签实际上就在那里。我错过了什么？

解决方案

您需要修改 angular-cli.json ，添加这些到 angular-cli.json 文件

 styles：[
。 ./node_modules/fullcalendar/dist/fullcalendar.min.css，
../node_modules/primeng/resources/primeng.min.css，
../node_modules/primeng/resources/ themes / omega / theme.css
，
scripts：[
../node_modules/jquery/dist/jquery.js，
../ node_modules / moment / min / moment.min.js，
../node_modules/fullcalendar/dist/fullcalendar.js
]，
  

I'm going to use Primeng schedule (http://www.primefaces.org/primeng/#/schedule) within a project based on Angular2 webpack starter(https://github.com/AngularClass/angular2-webpack-starter).

Since Primeng schedule depends on fullcalendar.js which is a jQuery plugin, I try to load fullcalendar and jQuery through webpack. I follow example at here (https://github.com/cagataycivici/angular2-webpack-starter).

In package.json, I added settings below to "devDependencies"

"fullcalendar": "^2.7.2",
"jquery": "^2.2.4",
"jquery-ui": "^1.10.5",

and added settings below to vendor.js

import 'script!jquery/dist/jquery.min.js';
import 'script!moment/moment.js';
import 'script!fullcalendar/dist/fullcalendar.js';

But the problem is that the Primeng schedule is not rendered in the webpage, even though the <p-schedule></p-schedule> tag is actually there. Did I miss something?

解决方案

You need to modify the angular-cli.json, add these to the angular-cli.json file

"styles"           : [
                "../node_modules/fullcalendar/dist/fullcalendar.min.css",
                "../node_modules/primeng/resources/primeng.min.css",
                "../node_modules/primeng/resources/themes/omega/theme.css"
            ],
            "scripts"          : [
                "../node_modules/jquery/dist/jquery.js",
                "../node_modules/moment/min/moment.min.js",
                "../node_modules/fullcalendar/dist/fullcalendar.js"
            ],

这篇关于Primeng时间表与Angular2 webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！