Angular 6+ allows you to copy arbitrary files during the build process. Well, within certain limits, of course. The target folder must be somewhere in the output directory (i.e. dist/<projectname>
by default).
You configure that in the angular.json
. Browse for the assets
section under architect/build/options
. Unless you haven't modified the default, this is what you'll see:
You can simple add files and folders to this array.
Fine-tuning the target folder
Here's the catch: if you add a folder, the files are always copied into the same directory structure, minus the top-level folder. Most of the time that's exactly what you need. For instance, your images are copied from src/assets/images/*.png
to dist/<projectname>/assets/images/*.png
.
If you need a different target folder, you need to know that the syntax is a short-hand for
"assets": [ {"glob": "**/*", "input": "src/assets/", "output": "/assets/"}, {"glob": "favicon.ico", "input": "src/", "output": "/"} ]If you prefer to copy your images into the root folder, you simply define a different output
folder:
Adding an ignore list
While we're at it: you can also add an ignore list. For instance, OSX frequently adds .DS_Store
files you don't want to bundle within your application, so let's ignore them:
Dig deeper
The Angular wiki has a page on these topics:
- Angular 6
- Angular 7 and beyond (also see here).