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.

Go to `your_project/src/index.html`, there you have SystemJS config. — Eric Martinez, Feb 29 '16 at 03:06

David Bulté · Accepted Answer · 2017-02-23T20:51:05.400

13

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

edited Feb 23 '17 at 20:51

answered Mar 09 '16 at 19:27

David Bulté

2,988
3
31
43

1

The new description in the Angular CLI wiki worked for me. Thanks for adding the link. – zabbarob May 19 '16 at 01:20
How do you know what files to include in vendorNpmFiles? Some packages have lots of js files in their module – tt_Gantz Aug 10 '16 at 03:18
You can use wildcards to include them all – David Bulté Aug 14 '16 at 14:54
Is the wiki link broken? I just end up on the wiki start page. – Sam Finnigan Sep 29 '16 at 09:51
Now that angular-cli has adopted webpack iso system.js, this answer doesn't make a lot of sense anymore. – David Bulté Sep 29 '16 at 10:02
After I follow the guidelines in the third party library installation - https://github.com/angular/angular-cli#3rd-party-library-installation I had that error saying: Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1_angular2_notifications__.method is not a function(…) @DavidBulté – Saiyaff Farouk Nov 23 '16 at 14:22
Sorry, I have no idea - maybe something with the latest version of anguar2 notifications? – David Bulté Nov 23 '16 at 19:31
That documentation doesn't exist anymore. – user2061057 Feb 22 '17 at 15:04
Updated the links – David Bulté Feb 23 '17 at 20:51

score 2 · Answer 2 · edited Mar 01 '16 at 10:29

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

edited Mar 01 '16 at 10:29

zabbarob

1,191
4
16
25

answered Feb 29 '16 at 11:27

Radoslav Stoyanov

1,460
5
27
40

thanks, but it doesn't work: `angular2-polyfills.js:1243 Error: XHR error (404 Not Found) loading http://localhost:4200/node_modules/ng2-material/all.js(…)Zone.run @ angular2-polyfills.js:1243` Problem is, when starting the dev server with `ng serve` files are not served from the project's root but from a generated `dist` folder. However, the data is somehow cached. Adding or removing files from `dist` doesn't change anything, and I don't know how to tell angular-cli to copy the ng2-material files. – zabbarob Mar 01 '16 at 09:49
PS: a workaround for this is copying the node_module-files to the src-folder "cp -r node_modules/ng2-material src/node_modules/ng2-material", which makes angular-cli copy the files as part of the project's source. however then the error message "Uncaught ReferenceError: require is not defined" appears when SystemJS loads the ng2-material module. – zabbarob Mar 01 '16 at 10:10
PPS: the "Uncaught ReferenceError: require is not defined" can be prevented by changing `format: 'register'` to `format: 'cjs'` in `System.config`'s `'node_module/ng2-material'` section. but then `angular2-polyfills.js` starts spitting out the error `Cannot read property 'getOptional' of undefined` – zabbarob Mar 01 '16 at 10:14
after stopping the server and restarting it (`ng serve`) it now works! though, it's still not clear how to correctly configure angular-cli so that `node_modules/ng2-material` doesn't have to be copied to `src/node_modules/ng2-material` – zabbarob Mar 01 '16 at 10:34
I spent a long time installing angular2-localstorage in a angular-cli generated project. Have no luck so far, getting 404. Tried the wiki link for adding 3rd party libs. It contains ts files, no js. I will try this work around of copying file from node_modules folder to the src folder. – A.W. Jun 23 '16 at 07:25

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

2 Answers2

Linked