Build to a single js file, not 4 files

[IvanGorbadei]

Sorry if it not the right place for such a question, but Angular-Cli team looks like the best answerer for it.

Angular-cli builds all code into several js files: main.bundle.js, inline.bundle.js, scripts.bundle.js and styles.bundle.js.
There are many people who would love to see only one file mostly for performance reasons.
Just one .js file with everything.

1)Is it configurable/possible?
2)Was the configuration with 4 files done on purpose, will there be huge architectural complications caused by moving to a single file?

[filipesilva]

I understand why this is useful, and it could be done.

[sgraham785]

this is useful https://github.com/dfsq/compressJS.sh

[akanieski]

I have a similar use case and would love to see this feature!

[filipesilva]

This isn't something we're looking at doing nowadays. It's good to have several files for caching purposes, since part of your app might still be cached on the client.

[awerlang]

Proceed as follows:

1. build with ng build --aot --prod --bo -sm --vendor-chunk=false --output-hashing=none
2. in .angular-cli.json, remove the line "polyfills": "polyfills.ts",
3. as for the file inline.bundle.js, well, inline it in your html

[bluwaterdogz]

Not using the angular cli in the problem solution, but my simple hack fix to getting one file with the package concat-files:

1. Save this file as concat.js to root directory
   var concat = require('concat-files'); var compile_to = 'ADD_COMPILE_LOCATION_AND_NAME_HERE' concat([ './dist/main.js', './dist/runtime.js', './dist/polyfills.js' ], compile_to, function(err) { if (err) throw err console.log('Compiled to , ', compile_to); });
2. Add this as build command in package.json:
   "build": "ng build --output-hashing none && node concat"

Obviously will not run if you are not outputting any of these files or if the output directory is different than the current. The build command can be further customized, but is a good starting place. LMK if theres anything I should add and hope it helps someone :)

[kirillgroshkov]

Well, it's easy to just concat js files in a build step. What's not easy is that we would like sourceMaps (*.map.js) to be preserves, since they are consumed by Sentry in case error occurs and allows to pinpoint the error down to typescript line of code and position. If we concat - we lose sitemaps:(

Any solution to that?

BTW, we're using ngx-build-plus, so we have a way to extend Webpack config.

[bluwaterdogz]

No sir I dont, would also be interested in a solution that preserves source maps but I dont work on angular or webpack, just providing a solution for people who want 1 file output based on what we do in production.

[awerlang]

@bluwaterdogz see my post above. I use this approach and works flawlessly with source maps.

[kirillgroshkov]

@bluwaterdogz see my post above. I use this approach and works flawlessly with source maps.

I'm doing the same, but I still have 3 bundles:

• main.js
• styles.js
• runtime.js

Vendor and polyfills are removed.

[awerlang]

@kirillgroshkov

inline.bundle.js was renamed runtime.js. I recommend to inline it on your page html:

<!-- node with swig.js -->
<script>{% include '../../../public/dist/js/runtime.js' ignore missing %}</script>

Regarding styles.js, I don't have this one. Maybe because the styles array on my angular.json file is empty.