How to add a third party library when using angular-cli?
Solution 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.
Solution 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'
}
});
Related videos on Youtube
zabbarob
Updated on June 04, 2022Comments
-
zabbarob almost 2 years
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 withng serve
and opened the webpage which just worked out fine. Next step, I installed ng2-material withnpm install ng2-material --save
. Then I addedMATERIAL_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. -
zabbarob about 8 yearsthanks, 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 withng serve
files are not served from the project's root but from a generateddist
folder. However, the data is somehow cached. Adding or removing files fromdist
doesn't change anything, and I don't know how to tell angular-cli to copy the ng2-material files. -
zabbarob about 8 yearsPS: 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 about 8 yearsPPS: the "Uncaught ReferenceError: require is not defined" can be prevented by changing
format: 'register'
toformat: 'cjs'
inSystem.config
's'node_module/ng2-material'
section. but thenangular2-polyfills.js
starts spitting out the errorCannot read property 'getOptional' of undefined
-
zabbarob about 8 yearsafter stopping the server and restarting it (
ng serve
) it now works! though, it's still not clear how to correctly configure angular-cli so thatnode_modules/ng2-material
doesn't have to be copied tosrc/node_modules/ng2-material
-
zabbarob almost 8 yearsThe new description in the Angular CLI wiki worked for me. Thanks for adding the link.
-
A.W. almost 8 yearsI 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.
-
tt_Gantz over 7 yearsHow do you know what files to include in vendorNpmFiles? Some packages have lots of js files in their module
-
David Bulté over 7 yearsYou can use wildcards to include them all
-
Sam Finnigan over 7 yearsIs the wiki link broken? I just end up on the wiki start page.
-
David Bulté over 7 yearsNow that angular-cli has adopted webpack iso system.js, this answer doesn't make a lot of sense anymore.
-
Saiyaff Farouk over 7 yearsAfter I follow the guidelines in the third party library installation - 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é
-
David Bulté over 7 yearsSorry, I have no idea - maybe something with the latest version of anguar2 notifications?
-
user2061057 about 7 yearsThat documentation doesn't exist anymore.
-
David Bulté about 7 yearsUpdated the links