2

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 Answers 3

5

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 !!

4
  • wooo its working fine, thanks , could you explain bit more about this ? Jun 6, 2016 at 11:47
  • I am experiencing the same issue and brand new to angular 2. Which config are we talking about here, which file to be more exact?
    – Greg Hill
    Sep 13, 2016 at 3:57
  • 1
    I am talking about systemjs.config.js file Sep 13, 2016 at 5:45
  • Where can I find this file @HardipsinhJadeja ?
    – DarioN1
    Apr 27, 2017 at 9:20
3

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
  • 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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.