Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 770
zabbarob Avatar asked Feb 29 '16 01:02

zabbarob


People also ask

What angular CLI command can be used to create a library?

Use the Angular CLI and the npm package manager to build and publish your library as an npm package. Angular CLI uses a tool called ng-packagr to create packages from your compiled code that can be published to npm.

Which file contains a reference to other third-party installation in angular?

The node modules folder is the default folder where all 3rd-party libraries are installed, according to which our application runs. This is used for development purposes. When we run or build our project then only required libraries are put together in a bundle and then deploy into the server.

How third-party libraries are installed in angular?

The easiest way to add third-party libraries is to use ES6 Modules. A library, which is exported declaratively, could be loaded in a few straightforward steps. Now that isEmpty is imported - we're able to invoke that method. But what will happen when we import this method like that way in another file?


1 Answers

[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.

like image 85
David Bulté Avatar answered Sep 21 '22 17:09

David Bulté