How to use node_modules path or third party assets in angular files.

Lokesh daiya — Sat, 20 Mar 2021 07:34:42 +0000

Some times we need to use assets from node_modules in our angular project files.

For example, you are using a third party package and you want to import css files from it in your index.html

If you try to import like this, it gives error:

<link href="./node_modules/some_packge_name/assets/style.css">

So how to resolve this issue ??

We can tell angular to copy required files in build.

We can add glob in angular.json for assets:

build": {
          .....
           "assets": [
...
              {
                "glob": "**/*",
                "input": "./node_modules/some_packge_name/assets",
                "output": "./custom-assets"
              }
            ],
...
}

input: Path of your assets folder in node_modules
output: Path you want to use in your application.

now we can use it in our index.html as below:

<link href="./custom-asssets/style.css">

If you want to use images from some package, you can use it as shown below:

 <img src="/custom-assets/some-img-file.png" />

Hope you guys find these resources hopeful!

DEV Community: Lokesh daiya

How to use node_modules path or third party assets in angular files.