- 2 minutes read

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:

"assets": [ "src/assets", "src/favicon.ico" ]

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:

"assets": [ {"glob": "**/*", "input": "src/assets/images", "output": "/"}, "src/favicon.ico" ]

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:

"assets": [ { "ignore": ["**/.DS_Store"], "glob": "**/*", "input": "src/assets/images", "output": "/" }, "src/favicon.ico" ]

Dig deeper

The Angular wiki has a page on these topics:


Comments