PrimeNG с Angular2-webpack-starter

Я пытаюсь настроить PrimeNG в моем проекте Angular2 на основе angular2-webpack-starter (https://github.com/AngularClass/angular2-webpack-starter).PrimeNG с Angular2-webpack-starter

Я установил PrimeNG и PrimeUI с помощью NPM установки, затем добавляют необходимые типизации в качестве окружающей среды зависимостей:

"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-стартер? Как мне решить эту проблему? И, может быть, как мне импортировать другие файлы, требуемые PrimeNG, например, таблицы стилей?

источник

2016-04-12 Marcin

Здесь есть образец PrimeNG + WebPack. https://github.com/primefaces/primeng-quickstart-webpack –

Вот вилка углового2-webpack-starter, которая добавляет PrimeNG для пользовательского интерфейса. https://github.com/cagataycivici/angular2-webpack-starter –

Это короткий и быстрый способ начать (не-НПМ), во-первых, вам необходимо скачать папки компонентов здесь 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-12 11:03:23

Честно говоря, я предпочитаю типичное решение для webpack/npm, особенно в таком случае, когда большинство пакетов используют CommonJS, а стартер - как для разработки, так и для производства. – Marcin

Я согласен, это беспорядок без менеджера пакетов .... –

Ручная установка пользовательского интерфейса JQuery через NPM и импорт его в vendor.ts (до Prime) исправил его для меня.

import 'jquery-ui/jquery-ui.js';

источник

2016-04-26 11:47:00 EnlitenedZA

ответ

Смежные вопросы