Add copyright header to compiled Angular app

Question

The website files that get compiled from building an Angular application with ng build --prod don't contain any copyright information, specifically those copyright headers that I add to my source code.

For example:

/*********
 * Copyright the current year Acme, Co.
 *********/

How do I add copyright header information to files from the ng CLI's production build output in an automatic way?

The goal is, for example, to modify the dist/apps/myapp/main.js file's copyright file header so that it looks the same as above.

I have tried concatenating a file with only the copyright header and the files output from the build process together at the end of the build, but that means I have to add steps to my release process, ng build --prod; cat ..., but I don't want to do that because it adds complexity to the build.

Answer 1

If you want to do it in an "Angular" way: it depends on the version. For the latest verison, use angular-builder's custom-webpack.

• Angular 5 and below - eject from angular-cli
• Angular 6,7,8 (3rd party) - you could use the package ngx-build-plus which lets you add some extra webpack stuff without ejecting
• Angular 7-current - use https://www.npmjs.com/package/@angular-builders/custom-webpack

I think the simplest webpack plugin/feature to add a comment to the top of an output file is BannerPlugin which you can read more about here https://webpack.js.org/plugins/banner-plugin/

Roughly to do this (have not tested) you would make a new file like webpack.extra.js and add the following:

const webpack = require('webpack'); module.exports = { plugins: [ new webpack.BannerPlugin('—– Some test comment for top of file —–') ] }

For ngx-build-plus you then pass this extra file on your next build:

ng build –extra-webpack-config webpack.extra.js

And the "Some test comment" should appear at the top of each chunk.

For @angular's custom webpack builders edit your angular.json file and add the path to your extra webpack config as customWebpackConfig as per the documentation (good examples in there). Then when you ng build, the extra webpack config will be included and you will find the comment at the top of each chunk in the resulting build.