3

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:

  • How can I add PrimeNg to an Angular2 project using Webpack?
  • Why isn't my import 'script!'... working?
  • Why can't primeng find angular?
2
  • What's version of angular2 do you use? Could you please show us your package.json? Commented Jun 14, 2016 at 4:29
  • Primeng requires RC version of angular2 Commented Jun 14, 2016 at 5:07

1 Answer 1

3

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",
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.