How to include assets from node_modules in angular cli project

Question

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?

try "assets": [ "../node_modules/<external library>/assets/*" ] — xx yy
– xx yy, Commented Apr 23, 2019 at 8:53

luvaas · Accepted Answer · 2018-11-15 05:50:02Z

124

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/"
  },

edited Nov 15, 2018 at 5:50

answered Apr 17, 2017 at 0:35

luvaas

2,2261 gold badge20 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

t.animal Over a year ago

Unfortunately this doesn't work any more for angular 6. For angular 6 config see my answer below.

Dani Andújar Over a year ago

I had to changed: "input": "../node_modules/<external_library>/..." to "input": "./node_modules/<external_library>/..." node_modules is as the same level at angular.json

Chip Allen Over a year ago

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?

luvaas Over a year ago

In pre-Angular 6 this method should work for both "ng build" AND "ng serve". They both use .angular-cli.json.

ZecKa Over a year ago

And then how can we reference these assets in <img> or css rule like background-image: url(...). ?

Erich Stark · Accepted Answer · 2019-01-23 19:59:14Z

69

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>"
  },

edited Jan 23, 2019 at 19:59

Erich Stark

414 bronze badges

answered Jun 26, 2018 at 8:52

t.animal

3,4281 gold badge28 silver badges26 bronze badges

3 Comments

marcel Over a year ago

Is there a way to only include specific files out of that folder?

t.animal Over a year ago

Use the globbing parameter

marcel Over a year ago

Works with "glob": "**/*(de|us|es).svg"

Derek Daley · Accepted Answer · 2020-02-20 15:04:37Z

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!

edited Feb 20, 2020 at 15:04

answered Jan 13, 2017 at 23:17

Derek Daley

1608 bronze badges

Comments

Elikill58 · Accepted Answer · 2022-01-20 12:48:51Z

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/"
]

edited Jan 20, 2022 at 12:48

Elikill58

5,04527 gold badges33 silver badges65 bronze badges

answered Jan 20, 2022 at 10:32

user17983356

111 bronze badge

1 Comment

Igor Brandão Over a year ago

do you know how we can reference these assets in <img> or css rule like background-image: url(...). ?

Collectives™ on Stack Overflow

How to include assets from node_modules in angular cli project

4 Answers 4

5 Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related