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

时间:2016-06-13 23:46:26

标签: angular webpack primeng

我正在尝试将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的its source所示,我向venders.ts添加导入:

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

似乎script!是某种特殊的东西,我的网络包不知道该怎么做。我得到了这个:

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!'...工作不正常?
  • 为什么不能找到角度?

1 个答案:

答案 0 :(得分:3)

好像我有两个独立的问题,它们都与我的package.json

中缺少的东西有关

第1期

  

好像是剧本!我的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.

第2期

这里的问题是我错过了script-loader。我通过以下方式解决了这个问题:

npm install script-loader --save

请参阅 - Using Loaders

  

这会产生以下附加警告:

     

webpack:bundle现在是有效的。 [默认]单独开始检查   过程...... [默认]   /.../node_modules/primeng/components/breadcrumb/breadcrumb.d.ts:3:24       找不到模块'@ 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",