How to include custom files with angular-cli build?

Issue

RE: Angular2 2.0.0, angular-cli v1.0.0-beta.11-webpack.8

How do I tell angular-cli to include a file from src/assets in the root of dist when it builds?

We deploy to a Windows host and need to include a web.config file to tell IIS to route everything to index. We were doing this pre RC4, but with all of the updating it fell through the cracks (I don't remember how we did it).

I've been scouring the GitHub repo docs and haven't found anything of use in regards to this topic. Maybe I'm in the wrong place?

In the ToC, there is a bullet point "Adding extra files to the build", but it appears that section doesn't exist.

Solution

Update

The most current documentation on this can be found at: https://angular.io/guide/workspace-config#assets-configuration

Notable Changes From Below

• The configuration file is now called angular.json
• The path is now relative to the root of the project not src

The team has added support for copying specific files as-is to the output folder (dist by default) in a later version of Angular CLI (would be beta 17 or 19 - it's been in final 1.x releases for ages).

You just add it to the array in angular-cli.json like:

{
  ...
  "apps" [
    {
       "root": "src",
       "assets": [
         "assets",
         "web.config"
       ],
       ...
    }
  ]
  ...
}

(Note that the path is relative to the src folder)

I personally use it and it works just fine.

As of beta 24, I have added a feature to Angular CLI that makes sure all assets files and folders are served from the webpack dev server when running ng test not just ng serve.

It also supports serving the asset files in the webpack dev server used for unit tests (ng test).
(in case you need some JSON files for the tests, or just hate to see 404 warnings in console).
They are already served from ng e2e because it runs a full ng serve.

And it has more advanced features as well, like filtering what files you want from a folder, and having the output folder name be different from source folder:

{
  ...
  "apps" [
    {
      "root": "src",
      "assets": [
        "assets",
        "web.config":
        {
          // Copy contents in this folder
          "input": "../",
          // That matches this wildcard
          "glob": "*.config",
          // And put them in this folder under `dist` ('.' means put it in `dist` directly)
          "output": "."
        }
      ],
      ...
    }
  ]
  ...
}

You can also refer to the official documentation: Angular Guide - Workspace configuration .

---

.

[FOR ARCHIVING ONLY] Original Answer (Oct 6, 2016):

This is not supported currently unfortunately (as of beta-16). I raised the exact concern to the team (web.config files), but it doesn't seem to be happening any time soon (unless you are forking the CLI, etc).

Follow this issue for full discussion and possible future details.

P.S.

For the JSON file, you can put it in ./src/assets/. This folder gets copied as-is to ./dist/assets/. This is the current behaviour.

Earlier in systemJS days there was another ./public/ folder that got copied to ./dist/ directly, but this is gone in Webpack versions, which the issue referenced above discusses.

Answered By - Meligy