How Ignite UI for JavaScript Works with Package Managers and Module Loaders

Ignite UI for JavaScript works with popular package managers to manage the dependencies of the project. The most popular package managers are:

• NPM
• Yarn
• JSPM

Step 1 Working with NPM

In previous lessons, you have used NPM to work with Ignite UI for JavaScript Angular components. To see how NPM works, download the starter project (you’ll also find the final version of the project here), open the terminal, and run the command listed below:

npm install

The NPM install command reads the package.json file to install the dependencies. To work with NPM, you must have NodeJS installed; if you do not already have it installed, you can install it from the NodeJS website. After running the NPM install command, you will find folder node_modules added in your project. This folder contains all the libraries installed using this command.

If you are working on an existing project, you may install the individual package in the project. To install the Ignite UI for JavaScript Angular components package individually, execute the following command:

npm install igniteui-angular2

To run the application, execute the command below:

npm start

Step 2 Working with Yarn

NPM is one of the most popular package managers, but it has some shortcomings:

• Nested dependencies cause a long file path on Windows.
• NPM does only sequential installation, so one package must be completely installed before you can start installing the next one.
• It can only install from the NPMSJS package and it does not have offline installation.

Yarn solves these problems. Yarn is a fast, reliable, and secure package manager that takes packages from npmjs or bower registry.

You can learn more about Yarn on its github page.

Like NPM, Yarn also reads package.json files of your project to install dependencies.

To work with Yarn, download the start project and open it in the terminal.

If you do not have Yarn installed on your machine, you must install it with the command below:

npm install –g yarn

Note: If you are using Apple’s Mac OS, you may receive permission errors when you try to install global packages with NPM. If this happens, try:

sudo npm install –g yarn

After installing Yarn, you can use it to install dependencies in your project. To install dependencies, run the command below:

yarn install

If you are working on an existing project, you may also install an individual package in the project. To install the Ignite UI for JavaScript Angular components package, execute the command below:

yarn add igniteui-angular2

After successful installation, you will find a node_modules folder added in the project. To run the application, execute the command below:

yarn start

If everything is correct, the above command should start the application and you will have a running application as shown below:

Step 3 Working with Dynamic Module Loaders

SystemJS is a module loader that can import a module at runtime and is built on top of the ES6 module loader. It can transpile ES6 code or TypeScript. SystemJS can work with many types of module formats such as AMD and CommonJS. It can also work with and support Ignite UI for JavaScript modules.

In the downloaded project, open the System.config.js file to find mapping for Ignite UI for JavaScript Angular components as shown below:

'igniteui-angular2': 'npm:igniteui-angular2'

In addition, you can find the Ignite UI for JavaScript Angular components package for loading as shown below:

'igniteui-angular2': {
  main: 'index.js',
  defaultExtension: 'js'
}

Due to packaging and mapping information in system.config.js, when the Angular application needs Ignite UI for JavaScript modules, it will be dynamically loaded by SystemJS in the application.