Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to include assets from node_modules in angular cli project

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?

like image 857
Madhu Ranjan Avatar asked Jan 09 '17 19:01

Madhu Ranjan


People also ask

Do we need node_modules in production angular?

When you export a static build the source file is converted into HTML & js files. So there is no need for node modules on production env. For dynamic builds we usually use CI which will run `yarn` or `npm install` on its own to create the node_modules. So no need to deploy node_modules along with your code.

What is the use of assets folder in angular?

The Angular application has a default assets folder. By default, whatever you put in the assets folder you can access it directly from the browser and queried through an HTTP request. You can create your own folder like assets by adding that folder to the assets section in the angular.

What is angular CLI json?

The angular.json file at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults. These are used for build and development tools provided by the Angular CLI. Path values given in the configuration are relative to the root workspace directory.

What is the use of node modules folder in angular?

node_modules/ − The npm package installed is node_modules. You can open the folder and see the packages available. src/ − This folder is where we will work on the project using Angular 7. Inside src/ you will app/ folder created during the project setup and holds all the required files required for the project.


2 Answers

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/"   }, 
like image 76
luvaas Avatar answered Sep 22 '22 20:09

luvaas


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>"   }, 
like image 26
t.animal Avatar answered Sep 23 '22 20:09

t.animal