How to include custom files with angular-cli build?

Question

The "assets" property of angular-cli.json can be configured to include custom files in angular-cli webpack build. So, configure "assets" property value as an array. For example:

"assets": ["assets", "config.json",".htaccess"],

above configuration will copy config.jon and .htaccess into dist folder during the angular-cli webpack build. above setting worked in angular-cli version 1.0.0-beta.18

Current Correct Answer:

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.

For Angular 8 readers,

.htaccessneeds to be src/.htaccess . See, below,

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

Make sure you have placed the .htaccess file inside src directory of your project.

and the file to put that in is angular.json, not the angular-cli.json

(If you need a valid htaccess file, then you can find one in here - https://stackoverflow.com/a/57126352/767625)

That's it. This should now be copied when you hit ng build --prod=true.

Hope this helps someone.

Cheers,

One solution (although in my opinion is a bit of a hack) is to declare a variable in your main.ts file that requires the extra file you want to include in the webpack build output.

EX:

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

/* HACK: Include standalone web.config file manually in webpack build
 *
 * Due to the way the beta angular-cli abstracts the webpack config files into
 * angular-cli.json and lacks current documentation we were unable to find
 * a way to include additional files manually in the webpack build output.
 *
 * For hosting on IIS we need to include a web.config file for
 * specifying rewrite rules to make IIS compatible with the Angular Router.
 * The one liner following this comment is a hack to accomplish this
 * and should be reviewed and corrected as soon as adequete documentation
 * is available for the angular-cli configuration file.
 */
const webConfig = require('file?name=[name].[ext]!./web.config');

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

When webpack encounters this variable declaration statement in main.ts it will emit the raw web.config file as part of the build output:

                            Asset       Size  Chunks             Chunk Names
                       inline.map    5.59 kB       2  [emitted]  inline
                       web.config  684 bytes          [emitted]
                 styles.bundle.js    16.7 kB    1, 2  [emitted]  styles
                        inline.js    5.53 kB       2  [emitted]  inline
                         main.map    5.36 MB    0, 2  [emitted]  main
                       styles.map    22.6 kB    1, 2  [emitted]  styles
                   main.bundle.js    4.85 MB    0, 2  [emitted]  main
                       index.html    1.98 kB          [emitted]
                assets/.npmignore    0 bytes          [emitted]
         assets/styles/global.css    2.74 kB          [emitted]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  4.45 kB       0
webpack: bundle is now VALID.

An ideal solution would be in the webpack configuration, but I can't make heads or tails of how the angular-cli is managing that through angular-cli.json as of yet (beta.16).

So if anyone has a better answer that extends the webpack configuration for an angular-cli generated project I'd love to hear it.