Angular-cli + primeng require is not defined

Question

I'm using angular-cli@1.0.0-beta.14 (webpack) and primeng@1.0.0-beta.15.

After create a fresh angular-cli project i made a few changes to add primeng:

1 on package.json:

"primeng": "^1.0.0-beta.15"

2 on angular-cli.json:

"styles": [ "styles.css", "../node_modules/primeng/resources/themes/omega/theme.css", "../node_modules/font-awesome/css/font-awesome.min.css", "../node_modules/primeng/resources/primeng.min.css" ],
"scripts": [ "../node_modules/primeng/primeng.js" ]

3 on app.module.ts:

@NgModule({ declarations: [ AppComponent ],
imports: [ BrowserModule, FormsModule, HttpModule, PanelModule ],
providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Problem:

Uncaught ReferenceError: require is not defined Unexpected value 'undefined' imported by the module 'AppModule'

Any help to add primeng to angular-cli... will we great! :)

Answer 1

So just about everything you have there looks good.

The issue lies in that you're attempting to include primeng as a script tag (which is for global libraries like jQuery). But since primeng deploys modules you can simply import it in your module and then supply that to your NgModule like this:

import { ButtonModule } from 'primeng/components/button/button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And then you'll also want to remove the reference to primeng.js from your angular-cli.json