Search code examples
javascripttypescriptwebpackangular-cliangular4-forms

Move a file from node_modules to assets using angular-cli.json


I have generated an angular app using angular CLI. And I'm trying to pipe (gulp term) files from node_modules to the app/assets directory so I could have bootstraps css available inside the app folders. First I thought its done by Webpack, so i did "ng eject" to get the ng-eject, but then I got to the angular-cli.json's "assets" which looks right now as below:

"assets": [
    "assets",
    "favicon.ico",
    { "glob": "**/*", "input": "../node_modules/bootstrap/dist/css/", 
    "output": "./assets/" }
  ]

Which does not work.

I'm used to grunt and gulp where you can specifically specify what files will be piped to what directories and I'm having difficulties to find an answer on how I do that using angular-cli.

What is the correct way to move a css file from node_modules to app/assets using angular-cli and webpack ?


Solution

  • After researching I got to the following conculsion... Webpack unlike gulp/grunt does not use piping to compile, and does not transfer files to the bundle folder, it uses loaders (css-loader, file-loader...) and import statements which load the css directly into the DOM. Angular-cli uses so the piping strategy is not relevant when choosing to work with angular CLI. However the css loading (for global css and script) is solved by using the angular-cli.json which has the scripts/style array to hold paths to global scripts and style to be loaded into the head of the index html. Apparently if you choose angular-cli you are stuck with this strategy, which is less flexible but more conviniat.