How to get one file as output of angular cli

问题:

I'm working on ng2 application and I use @angular/cli to build it. As output it emits several js files like .inline.js, .vendor.js etc.

The question is -- how to set up angular-cli to emit only one file as a result, i.e. bundle vendor.js, inline.js etc. into one big file?

I understand that it could be done by using additional bundler but it would be nice to achieve it via ng-cli

PS I don't use lazy loading in this app and definitely won't.

PPS Just concat files afterwards is not an option because:

• it doesn't work with hash in file name, need to update html as well
• it introduces an additional build step which is not necessary

As for now it looks like moving to pure webpack would be the easiest and best option

UPDATE

there is possibility to avoid vendor.js setting --vendor-chunk to true but as a result I still get several files: inline.bundle.js main.bundle.js polyfills.bundle.js

回答1:

I have not seen any functionality in angular-cli that builds into one bundle, however, it should be fairly easy to do with a nodejs script or using one of the concat libraries available such as concat-files https://www.npmjs.com/package/concat-files

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

var concat = require('concat-files');
concat([
    './dist/inline.bundle.js',
    './dist/vendor.bundle.js',
    './dist/vendor.bundle.js'
], './dist/app.js', function(err) {
    if (err) throw err
    console.log('done');
});

in your package.json under scripts add a new script build:

"scripts":{
    "build": "ng build && node concat.js"
}

then run it npm run build it will run the angular cli build first the run the concat.js script which will concatenate the resulting bundles

回答2:

Angular CLI natively doesn't support this.

There are other solutions, including further processing with other tooling after Angular CLI finishes doing its thing, but this will hinder or remove the debugging capabilities Angular provides out-of-the-box.

As the ng eject command is also being deprecated, the option to reconfigure webpack is not as attractive as it used to be. However, that is still technically a possibility.

My solution:

The best solution I have found is the ngx-build-plus plugin, which can be found at https://github.com/manfredsteyer/ngx-build-plus or added to a project via the ng add ngx-build-plus Angular-CLI command currently. Once installed, it provides additional configuration options for building, including the --single-bundle true flag that can be added to an ng build or ng serve command.

With that flag, a main.js file and a main.js.map file are created, already referenced in the HTML, and it'll just run like that properly out of the box, with full source mapping and debugging.

回答3:

1- use the ng build --prod --output-hashing=none, which creates the files without the cash-buster ( the random hash).

2- Use cat to bundle them in 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