{"id":848,"date":"2021-03-29T00:23:16","date_gmt":"2021-03-28T22:23:16","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=848"},"modified":"2022-06-08T17:56:02","modified_gmt":"2022-06-08T15:56:02","slug":"ng-add-vs-npm-install","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2021\/03\/29\/ng-add-vs-npm-install\/","title":{"rendered":"&#8220;ng add&#8221;  VS  &#8220;npm install&#8221;"},"content":{"rendered":"\n<p>As Angular6 has been released, They have added a new command&nbsp;<a href=\"https:\/\/github.com\/angular\/material2\/blob\/master\/src\/lib\/schematics\/collection.json\">ng add&nbsp;<\/a>.<\/p>\n\n\n\n<p>what will be the difference between existing&nbsp; command<code> npm install &lt;package&gt;<\/code>&nbsp;and&nbsp;<code>ng add &lt;package&gt;<\/code><\/p>\n\n\n\n<h5><span class=\"has-inline-color has-vivid-cyan-blue-color\">ng add<\/span><\/h5>\n\n\n\n<p><code>ng add &lt;package&gt;<\/code>&nbsp;uses your package manager and installs the dependency. That dependency can have an installation script which can be used to do more job except the dependency installation. It can update your configurations (In&nbsp;<code>angular.json<\/code>&nbsp;file as well), download another dependencies based on that one or create scaffold templates&nbsp;<em>(with initial markup and logic<\/em>).<\/p>\n\n\n\n<p><strong>For example<\/strong>&nbsp;you run the command&nbsp;<code>ng add @angular\/material?\u2014?Install<\/code>, it will automatically install the package and configure in&nbsp;<code>angular.json<\/code>&nbsp;file too.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h5><span class=\"has-inline-color has-vivid-cyan-blue-color\">npm install<\/span><\/h5>\n\n\n\n<p><code>npm install &lt;package&gt;<\/code>&nbsp;just installs the dependency. It means, it &nbsp;will only install your package into your project but will not configure in order to use.<\/p>\n\n\n\n<p><strong>For example<\/strong>&nbsp;you run the command&nbsp;<code>npm install jquery<\/code>&nbsp;it will install jQuery in your project but you need to configure manually in&nbsp;<code>.angular-cli.json<\/code>&nbsp;file (as in v5)<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As Angular6 has been released, They have added a new command&nbsp;ng add&nbsp;. what will be the difference between existing&nbsp; command npm install &lt;package&gt;&nbsp;and&nbsp;ng add &lt;package&gt; ng add ng add &lt;package&gt;&nbsp;uses your package manager and installs the dependency. That dependency can have an installation script which can be used to do more job except the dependency [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[211,267,268,148],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/848"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=848"}],"version-history":[{"count":4,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/848\/revisions"}],"predecessor-version":[{"id":1971,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/848\/revisions\/1971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}