CODEWITHSUNDEEP
angularwebpackprimeng
sixtyfootersdude
sixtyfootersdude

Reputation: 27231

Add PrimeNG into Angular2 app using Webpack

I am attempting to load PrimeNG into my Webpack bundled Angular2 app.

First I did an npm install: 

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

This added the following two lines to my package.json: 

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

Next, as shown in this github commit from angular2-webpack-starter, I add an import to venders.ts:

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

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.

I am not sure if this is problem or not. My app still loads...

Continuing, I add the following two imports to my AppComponent:

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

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'.

Questions:

Upvotes: 3

Views: 6758

Answers (1)

sixtyfootersdude
sixtyfootersdude

Reputation: 27231

Seems like I had two independent issues, both of them related to missing things in my package.json

Issue 1

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.

Issue 2

The problem here was that I was missing the script-loader. I resolved this by doing an:

npm install script-loader --save

See - Using Loaders

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'.

Adding the router to my package.json resolved this issue: 

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

Upvotes: 3

Related Questions