How to get one file as output angular cli

I am working on ng2 app and am using @angular/cli

to build it. As output, it generates several js files like .inline.js

, .vendor.js


The question is how to set up angular- vendor.js


as a result of only one file, i.e. link vendor.js

, inline.js

etc. One big file?

I understand it can be done with an additional wrapper, but it would be nice to do it with ng-cli

PS I am not using lazy loading in this app and definitely will not.

PPS Just concatenating files later is not an option, because:

  • it doesn't work with hash in filename, HTML needs to update too
  • it introduces an extra build step that is not necessary

For now, it looks like moving to a clean webpack will be the easiest and best option.


it is possible to avoid vendor.js

setting --vendor-chunk

in true

but as a result I still get multiple files:inline.bundle.js




source to share

4 answers

Angular CLI does not natively support this.

There are other solutions, including further processing using other tools after Angular CLI exits, but this will hinder or eliminate the debugging capabilities that Angular provides out of the box.

Since the team is ng eject

also outdated, the ability to reconfigure the webpack is not as attractive as it used to be. Technically, however, this is still possible.

My decision:

The best solution I've found is a plugin ngx-build-plus

which can be found at or added to the project using the ng add ngx-build-plus

Angular-CLI command . Once installed, it provides additional configuration options for the build, including a flag --single-bundle true

that can be added to the ng build

or command ng serve


This flag creates a main.js file and a file that are already referenced in the HTML, and will work just as well out of the box, with full source mapping and debugging.



I have not seen any functionality in angular-cli that is built into one package, however it should be quite easy to do this with a nodejs script or using one of the available concat libraries like concat-files concat-files

install the concat files then: add the concat.js file to your project at the same level as the dist folder

var concat = require('concat-files');
], './dist/app.js', function(err) {
    if (err) throw err


add a new script to your package.json

sub :scripts


    "build": "ng build && node concat.js"


then run it npm run build

, first it will run the angular cli build by running the concat.js script which will merge the resulting packages



1- uses ng build --prod --output-hashing=none

, which creates files without a cachebuster (random hash).

2- Use cat

to link them into one file

"build":"ng build --prod --output-hashing=none",
"package":" cat dist/angular-project/{polyfills,runtime,main}.js > ./package.js",
"bundle":"npm run build && npm run package"


And use it like:

npm run bundle




I solved this in my project with a custom script that I run after ng build


The script does the following:

  • Scans the file dist/index.html

    for all tags <link>

    and <script>

  • Combines all files referenced by <link>

    / tags <script>

    into their respective packages.
  • Removes all of these elements from the index.html file and adds a new element that references packages.

For example, this index.html file ...

        <link rel="stylesheet" src="/dist/styles.css">
        <link rel="stylesheet" src="/dist/foo.css">
        <link rel="stylesheet" src="/dist/bar.css">
        <script src="/dist/main.js">
        <script src="/dist/inline.js">
        <script src="/dist/scripts.js">
        <script src="/dist/foo.js">
        <script src="/dist/bar.js">


... will turn into this:

        <link rel="stylesheet" src="/dist/bundle.css">
        <script src="/dist/bundle.js">


This works very well for me using Angular 8.



All Articles