How to add a third party library when using angular-cli?

Question

I wanted to try out creating an Angular 2 app with angular-cli (https://github.com/angular/angular-cli) and then use ng2-material (https://github.com/justindujardin/ng2-mate

Answer 1

[EDIT 29/09/2016] Now that angular-cli is using webpack iso system.js, this answer doesn't make a lot of sense anymore. Check the pages '3d party lib installation' and 'global lib installation' on the angular-cli wiki.

[EDIT 10/05/2016] This is now described in full detail on the angular cli wiki.

This worked for me:

In the ember-cli-build.js, you add the dependency to the vendorNpmFiles, e.g.

module.exports = function (defaults) {
  var app = new Angular2App(defaults, {
      vendorNpmFiles: [
          'a2-in-memory-web-api/web-api.js'
      ]
  });
  return app.toTree();
}

(where a2-in-memory-web-api/web-api.js is a file in my node_modules folder)

In the index.html you add the following line:

<script src="vendor/a2-in-memory-web-api/web-api.js"></script>

Finally you restart your server.

Haven't tested it with angular material but you get the idea.

Answer 2

Try configuring SystemJS in the index.html like this:

System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        },
        'node_modules/ng2-material': {
            format: 'register',
            defaultExtension: 'js'
        }
    },
    paths: {
        'ng2-material/all': 'node_modules/ng2-material/all'
    }
});