CODEWITHSUNDEEP
angularangular-cli
Madhu Ranjan
Madhu Ranjan

Reputation: 17904

How to include assets from node_modules in angular cli project

How to include assets from external library into Angular CLI project

I am trying below but this does not work,

  "assets": [
    "../node_modules/<external library>/assets/"
  ]

Scripts are working fine though,

 "scripts": [  
    "../node_modules/<external library>/some.js",     
    "startup.js"
 ]

Angular Version : 2.4.1

Angular CLI : 1.0.0-beta.24

Any suggestion?

Upvotes: 73

Views: 43905

Answers (4)

user17983356
user17983356

Reputation: 11

I am new here but I have this issue with npm package like in my case I have to call another application UI through npm package in current application and image from package itself.

2 changes we need this case :

  • Angular 6 above, in respective ng-package json add : assets:['./assets'] in child application as this will create assets/image folder in dist folder on build.

  • In angular.json add (in both architect and test) in parent application:

assets: [
   {
      "glob": "**/*",
      "input":"node_modules/"path of assets folder"/images"
   },
   "output":"./assets/images/"
]

Upvotes: 1

Derek Daley
Derek Daley

Reputation: 160

Unfortunately, this doesn't exist yet :(. I'm desperately awaiting this feature also. Feel free to track this feature request here for Angular-Cli. Copying assets from node_modules

Updated

See @luvaas response as of Angular 6!

Upvotes: 1

t.animal
t.animal

Reputation: 3331

Since angular 6 the config has changed slightly. To achieve this now, change the assets property of the respective builder in angular.json (beware, there are at least two relevant builders in the architects build and test!)

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/<your-node-module>/<possibly-subfolders>",
    "output": "./assets/<possibly-subfolders>"
  },

Upvotes: 68

luvaas
luvaas

Reputation: 2226

This does now exist!

Fix #3555

To use it, update your .angular-cli.json file like so...

Angular version 2-5:

"assets": [
  "assets",
  { "glob": "**/*", "input": "../node_modules/<external library>/assets/", "output": "./assets/" }
]

Angular version >= 6:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/<your-node-module>/<possibly-subfolders>/",
    "output": "./assets/"
  },

Upvotes: 124

Related Questions