0

我正在尝试基于 angular2-webpack-starter ( https://github.com/AngularClass/angular2-webpack-starter ) 在我的 Angular2 项目中配置 PrimeNG。

我使用 npm install 安装了 PrimeNG 和 PrimeUI，然后添加了必要的类型作为环境依赖项：

"jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#470954c4f427e0805a2d633636a7c6aa7170def8",
"jqueryui": "github:DefinitelyTyped/DefinitelyTyped/jqueryui/jqueryui.d.ts#a3a5cd5554dc2c0ff8955d1db0673879af3095bc",
"primeui": "github:primefaces/primeui/primeui.d.ts#7640bc59a3634e501634655217fdd413bed6d003",

首先，我遇到了 jquery 输入问题。它给了我以下错误：

Subsequent variable declarations must have the same type.  Variable '$' must be of type 'cssSelectorHelper', but here has type 'JQueryStatic'.

我通过在以下行中注释掉它来解决它typings/browser/ambient/jquery/index.d.ts：

declare module "jquery" {
    export = $;
}
declare var $: JQueryStatic;

现在我正在尝试使用命令primeui-ng-all.min.js在vendor.ts文件中导入。import "primeui/primeui-ng-all.min.js";但是我收到以下错误：

Module not found: Error: Cannot resolve module 'jquery-ui' in .../angular2-webpack-starter/node_modules/primeui @ ./~/primeui/primeui-ng-all.min.js 8:23135-23167

将 PrimeNG 包含在 angular2-webpack-starter 中是否正确？我应该如何解决这个问题？也许我应该如何导入 PrimeNG 所需的其他文件，例如样式表？

4

2 回答 2

1

这是一种快速入门的方法（非 npm），首先您需要从这里下载组件文件夹https://github.com/primefaces/primeng 然后将其添加到您的 index.html 添加头

 <link rel="stylesheet" type="text/css" href="prime/resources/primeui/themes/delta/theme.css"/>
        <link rel="stylesheet" type="text/css" href="prime/resources/icons/css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="prime/resources/css/prism.css"/>
        <link rel="stylesheet" type="text/css" href="prime/resources/css/fullcalendar.css"/>
        <link rel="stylesheet" type="text/css" href="prime/resources/css/quill.snow.css"/>
        <link rel="stylesheet" type="text/css" href="prime/resources/primeui/primeui-ng-all.css"/>
        <link rel="stylesheet" type="text/css" href="prime/resources/css/site.css"/>
<script src="prime/resources/primeui/primeui-ng-all.min.js"></script>
<script src="prime/resources/js/prism.js"></script>
<script src="prime/resources/js/charts.min.js"></script>
<script src="prime/resources/js/moment.js"></script>
<script src="prime/resources/js/fullcalendar.js"></script>
<script src="prime/resources/js/site.js"></script>
<script>
        System.config({
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true },
            packages: {'app': {defaultExtension: 'ts'},
                'components': {defaultExtension: 'ts'}, //Your downloaded components folder here.
                'prime/resources/js' : {defaultExtension: 'js'}
        });
        System.import('app/boot')
                .then(null, console.error.bind(console));
    </script>

在配置应用程序之前检查路径。

于 2016-04-12T11:03:23.223 回答
0

通过 NPM 手动安装 JQuery UI 并将其导入 vendor.ts（在 Prime 之前）为我修复了它。

import 'jquery-ui/jquery-ui.js';
于 2016-04-26T11:47:00.420 回答