70

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?

Madhu Ranjan
  • 17,334
  • 7
  • 60
  • 69

4 Answers4

119

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/"
  },
luvaas
  • 2,156
  • 1
  • 18
  • 14
  • 3
    Unfortunately this doesn't work any more for angular 6. For angular 6 config see my answer below. – t.animal Jun 26 '18 at 08:52
  • I had to changed: "input": "../node_modules//..." to "input": "./node_modules//..." node_modules is as the same level at angular.json – Dani Andújar Aug 09 '18 at 10:15
  • What's the best way to have it work for "ng serve" too? I know you could add a symbolic link locally so it looks like the file is in the assets folder - is there another way? – Chip Allen May 07 '19 at 20:58
  • In pre-Angular 6 this method should work for both "ng build" AND "ng serve". They both use .angular-cli.json. – luvaas May 08 '19 at 21:20
  • And then how can we reference these assets in `` or css rule like `background-image: url(...)`. ? – ZecKa Mar 02 '22 at 13:03
67

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>"
  },
Erich Stark
  • 31
  • 4
t.animal
  • 3,012
  • 1
  • 24
  • 25
1

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!

Derek Daley
  • 160
  • 8
1

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/"
]
Elikill58
  • 4,050
  • 24
  • 23
  • 45
user17983356
  • 11
  • 1