Ignite UI With Different Package Managers

Ignite UI works with popular package managers to manage the dependencies of the project. The most popular package managers are: NPM, yarn, and JSPM.

Step 1 Working with NPM

In previous lessons, you have used NPM to work with Ignite UI controls. To see in 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

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

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

npm install igniteui-angular2

To run the application, execute the command below:

npm start

Using NPM

Step 2 Working with Yarn

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

  • Nested dependencies, which causes a long file path on Windows
  • NPM does only sequential installation, so one package must be completely installed before moving to the install of the next package
  • 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. It takes packages from npmjs or bower registry. Although Yarn has advantages over NPM, NPM is still widely used and is the most popular package manager.

You can learn more about Yarn on their 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 Yarn to install dependencies in your project. Like npm, Yarn also reads package.json to install dependencies. 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 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:

Working with Yarn

Step 3 Working With Dynamic Module Loaders

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

In the downloaded project, open the System.config.js file and you will find mapping for Ignite UI Angular 2 as shown in the listing below:

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

In addition, you can find the Ignite UI 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 modules, it will be dynamically loaded by SystemJS in the application.

Conclusion

In web development, adding references of libraries has come a long way. It began with adding references manually in the project, then using Content Delivery Networks (CDN) to add references, and then various package managers such as bower, NPM, and Yarn came to existence. Ignite UI can be used with previous ways of managing packages like CDN or can be used with modern package managers such as NPM and Yarn. In addition to package managers, Ignite UI can be used with popular module loaders like SystemJS.