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?
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.
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.
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.
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.
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/" },
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>" },
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With