How to include custom files with angular-cli build?

Question

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 1

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.

Solution 2

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

Solution 3

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,

Solution 4

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.

Solution 5

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

View more solutions

Comments

[Kizmar]

Yes, but web.config isn't a JavaScript file. Will it also copy that without expecting it to be JS and bundling it with the rest of the JS?

[Nathan Cooper]

@Kizmar, Yeah, this won't work. It will try (and fail) to load it as js.

[Manny]

Needs to be under "apps" , example: "apps": [ { "assets": [ "config/appConfig.json" ] }]

[Gleb]

Looks like a true, but not work for me. "assets": "assets" and "assets": ["assets"] - work, but "assets": ".htaccess", "assets": ["assets", ".htaccess"] - doesn't work. Any suggestions?

[Md Ayub Ali Sarker]

@gleb, add like "assets": ["assets", ".htaccess"] , i think this will serve your purpose.

[Gleb]

@MdAyubAliSarker, thanks, the problem was that I used angular-cli version 1.0.0-beta.17. 1.0.0-beta.19 works well for me

[Rodney]

@Kizmar: When I try this with "web.config" it fails with "Module Parse Failed". "Module parse failed... you may need an app loader... etc. Did you encounter this?

[Rodney]

Ok, ignore that, was a type - it works. So the Web.config needs to go into the root of the Src folder and then the JSON file looks like "assets": [ "assets", "web.config" ],

[patrickbadley]

This config worked for me: { "glob": "*/", "input": "src/assets", "output": "/assets" },

[edu]

In angular 8 - "assets": [ "assets", "src/web.config" ] or it will throw the error "The web.config asset path must start with the project source root."

[mMerlin]

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

[waldrabe]

Still works that way with Angular 12 (2021). The "assets" array is already present in the angular.json if you generated your project with Angular CLI. You just have to add your file in there.

[waldrabe]

The "assets" array is in file 'angular.json', not 'angular-cli.json' for Angular 12, and from other answer I see it's working that way since at least Angular 8.

[Anjana Silva]

Thanks, @waldrabe for checking against Angular 12. Cheers.

[Odilbek Utamuratov]

According to the current angular assets configuration, You should just this object to your assets list: { "input": "./", "glob": "*.config", "output": "."} In this case the config file is situated on the same place with angular.json (on the root directory of the project) and after build it appears on the root directory of the project inside of the dist folder