PrimeNG not working with angular2 cli?

1
votes

Trying to work with angular2 cli and PrimeNG but facing error :

http://localhost:4200/vendor/primeng/primeng 404 (Not Found)

What I have done so far :

  • npm install primeng

  • In angular-cli-build.js file add path like this :-

      (...)
  'primeng/**/*.+(js|js.map)'
  (...)

  • and using in my component like this:-

     import {Calendar} from 'primeng/primeng';

but getting error PrimeNG not found.

Should I have to do anything else to make this working ?

3
angularprimeng

3 Answers

5
votes

Hi You need to add the reference of primeng into the config

    var  map = {
    ...
    'primeng' :            'primeng/primeng'
    ...
 };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    ...
    'primeng' :            {main : "<path of its js file>", defaultExtension : "js"}
    ...
  };

var config = {
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    map: map,
    packages: packages
  }

  System.config(config);

})(this);

Hope this helps !!

3
votes

The accepted answer is for System.js Im also using primeNG with angular cli and i installed it as a dependency by typing

npm install --save primeng

Later in appModule.ts make sure you have the folloing imports

import {ChartModule}  from 'primeng/primeng';
import {DialogModule}  from 'primeng/primeng';

and in the @NgModule array of imports, add them as well as shown

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ChartModule,
    DialogModule,
    Ng2PaginationModule,
    RouterModule.forRoot(appRoutes)
  ],
1
votes
  • npm install primeng --save
  • npm install primeicons --save

run these two commands

  • npm install @angular/animations --save

install animations also and then import the modules whatever we want to import in module.ts