DEV Community

loading...

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

lokeshdaiya profile image Lokesh daiya ・1 min read

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">
Enter fullscreen mode Exit fullscreen mode

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"
              }
            ],
...
}
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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

 <img src="/custom-assets/some-img-file.png" />
Enter fullscreen mode Exit fullscreen mode

Hope you guys find these resources hopeful!

Discussion (0)

pic
Editor guide