DEV Community

Lokesh daiya
Lokesh daiya

Posted on

3 1

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

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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video