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-material) for UI components. But I just don't understand how / where I have to include the ng2-material library in order to use it.

I created a project with ng new myproject then I started the server with ng serve and opened the webpage which just worked out fine. Next step, I installed ng2-material with npm install ng2-material --save. Then I added MATERIAL_PROVIDERS to angular's bootstrap as is shown here https://github.com/AngularShowcase/angular2-seed-ng2-material/blob/master/app/bootstrap.ts.

This results in an error message GET http://localhost:4200/ng2-material/all 404 (Not Found) in the web browser, and I just can't figure out how to get rid of it.

angular-cli seems to be doing something to create a dist-folder where some of the node modules that are used in the index.html end up in, but I don't see where or how that's configured.

By : zabbarob


Answers

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'
    }
});


This video can help you solving your question :)
By: admin