使用Webpack将PrimeNG添加到Angular2应用程序中

Question

我尝试将PrimeNG加载到我的Webpack打包的Angular2应用程序中。

首先进行了npm安装：

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

这让我在package.json文件中添加了以下两行内容：

+    "primeng": "^1.0.0-beta.8",
+    "primeui": "^4.1.12",

接下来，如angular2-webpack-starter的github提交所示，我在venders.ts中添加了一个导入：

import 'script!primeui/primeui-ng-all.min.js';

看起来script!是一些特殊的东西，我的webpack不知道如何处理。我收到了以下错误信息：

ERROR in ./src/vendor.ts
Module not found: Error: Cannot resolve module 'script' in /SomeDir/src
 @ ./src/vendor.ts 14:0-47
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 570 kB
         + 4 hidden modules
webpack: bundle is now VALID.

我不确定这是否是问题。我的应用程序仍在加载...

继续进行，我向我的AppComponent添加了以下两个导入项：

import {TabView} from 'primeng/primeng';
import {TabPanel} from 'primeng/primeng';

这将产生以下额外的警告:

webpack: bundle is now VALID.
[default] Checking started in a separate process...
[default] /.../node_modules/primeng/components/breadcrumb/breadcrumb.d.ts:3:24 
    Cannot find module '@angular/router'.
[default] /.../someDir/node_modules/primeng/components/contextmenu/contextmenu.d.ts:4:24 
    Cannot find module '@angular/router'.
[default] /.../someDir/node_modules/primeng/components/megamenu/megamenu.d.ts:4:24 
    Cannot find module '@angular/router'.
[default] /.../someDir/node_modules/primeng/components/menu/menu.d.ts:4:24 
    Cannot find module '@angular/router'.
[default] /.../someDir/node_modules/primeng/components/menubar/menubar.d.ts:4:24 
    Cannot find module '@angular/router'.
[default] /.../someDir/node_modules/primeng/components/panelmenu/panelmenu.d.ts:3:24 
    Cannot find module '@angular/router'.
[default] /.../someDir/node_modules/primeng/components/slidemenu/slidemenu.d.ts:4:24 
    Cannot find module '@angular/router'.
[default] /.../someDir/node_modules/primeng/components/splitbutton/splitbutton.d.ts:4:24 
    Cannot find module '@angular/router'.
[default] /.../someDir/node_modules/primeng/components/tabmenu/tabmenu.d.ts:3:24 
    Cannot find module '@angular/router'.
[default] /.../someDir/node_modules/primeng/components/tieredmenu/tieredmenu.d.ts:5:24 
    Cannot find module '@angular/router'.

问题：

• 如何使用Webpack将PrimeNg添加到Angular2项目中？
• 为什么我的import 'script!'...不起作用？
• 为什么Primeng找不到Angular？

- sixtyfootersdude

---

你使用的Angular2版本是什么？你能展示一下你的“package.json”文件吗？ - yurzui

Primeng需要RC版本的Angular2。 - yurzui

Answer 1

似乎我有两个独立的问题，都与我的package.json文件中缺少的内容有关。

问题一

It seems like script! is some kind of special thing that my webpack doesn't know how to do. I am getting this:

ERROR in ./src/vendor.ts
Module not found: Error: Cannot resolve module 'script' in /SomeDir/src
 @ ./src/vendor.ts 14:0-47
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 570 kB
         + 4 hidden modules
webpack: bundle is now VALID.

问题2

这里的问题是我没有引入 script-loader。我解决了这个问题，通过执行以下操作:

npm install script-loader --save

请查看 - 使用加载器。

This generates the following additional warnings:

webpack: bundle is now VALID. [default] Checking started in a separate process... [default] /.../node_modules/primeng/components/breadcrumb/breadcrumb.d.ts:3:24 Cannot find module '@angular/router'. [default] /.../someDir/node_modules/primeng/components/contextmenu/contextmenu.d.ts:4:24

Cannot find module '@angular/router'. [default] /.../someDir/node_modules/primeng/components/megamenu/megamenu.d.ts:4:24

Cannot find module '@angular/router'. [default] /.../someDir/node_modules/primeng/components/menu/menu.d.ts:4:24 
Cannot find module '@angular/router'. [default] /.../someDir/node_modules/primeng/components/menubar/menubar.d.ts:4:24

Cannot find module '@angular/router'. [default] /.../someDir/node_modules/primeng/components/panelmenu/panelmenu.d.ts:3:24

Cannot find module '@angular/router'. [default] /.../someDir/node_modules/primeng/components/slidemenu/slidemenu.d.ts:4:24

Cannot find module '@angular/router'. [default] /.../someDir/node_modules/primeng/components/splitbutton/splitbutton.d.ts:4:24

Cannot find module '@angular/router'. [default] /.../someDir/node_modules/primeng/components/tabmenu/tabmenu.d.ts:3:24

Cannot find module '@angular/router'. [default] /.../someDir/node_modules/primeng/components/tieredmenu/tieredmenu.d.ts:5:24

Cannot find module '@angular/router'.

将路由器添加到我的package.json中解决了这个问题：

"@angular/router": "2.0.0-rc.1",

- sixtyfootersdude