How to include custom files with angular-cli build?

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.

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

> ## 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 {
...
"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": "."
}
],
...
}
]
...
}
 ('.' means put it in {
...
"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 {
...
"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": "."
}
],
...
}
]
...
}
 ('.' means put it in dist directly)
"output": "."
}
],
...
}
]
...
}
 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.

There is a "scripts" section in angular-cli.json file. You can add all the third party javascript files there.

Modify angular.json.
Add entry to assets array:

{
  "glob": "**/web.config",
  "input": "src/",
  "output": "./"
}

In my case I used Angular version 5, So I tried create file called Staticfile.txt when running ng build --prod command. make sure to give the file extension , otherwise it won't create the file.