Running PrimeNG with SystemJS

PrimeNG (https://www.primefaces.org/primeng) is an open source library of rich UI components for Angular 2+. PrimeNG is derived from PrimeFaces--the most popular JavaServer Faces (JSF) component suite. If you know PrimeFaces, you will feel at home with PrimeNG due to similar API. Currently, PrimeNG has 80+ visually stunning widgets that are easy to use. They are divided into several groups such as input and select components, buttons, data iteration components, panels, overlays, menus, charts, messages, multimedia, drag-and-drop, and miscellaneous. There are also 22+ free and premium themes.

PrimeNG fits perfectly with the mobile and desktop development because it is a responsive and touch optimized framework. PrimeNG showcase is a good place to play with the components, try them in action, study documentation, and code snippets. Anyway, we need a systematic approach for getting started with PrimeNG. This is what this book tries to convey. In this chapter, we will set up and run PrimeNG with SystemJS (https://github.com/systemjs/systemjs)--universal module loader supporting various module formats. SystemJS is a good choice for learning purposes if you want to try TypeScript, Angular, PrimeNG code snippets, or write small applications in Plunker (https://plnkr.co) because it can load your files, transpile them (if needed) and resolve module dependencies on-the-fly. In the real applications, you should choose Webpack or Angular CLI-based setups that have more power and advanced configurations. They also bundle your application in order to reduce the amount of HTTP requests. Those setups will be discussed in the next two sections.