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
etc.
The question is how to set up angular- vendor.js
inline.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.
UPDATE
it is possible to avoid vendor.js
setting --vendor-chunk
in true
but as a result I still get multiple files:inline.bundle.js
main.bundle.js
polyfills.bundle.js
source to share
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 https://github.com/manfredsteyer/ngx-build-plus 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 main.js.map file that are already referenced in the HTML, and will work just as well out of the box, with full source mapping and debugging.
source to share
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
https://www.npmjs.com/package/ 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');
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');
});
add a new script to your package.json
sub :scripts
build
"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
source to share
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
source to share
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 ...
<html>
<head>
<link rel="stylesheet" src="/dist/styles.css">
<link rel="stylesheet" src="/dist/foo.css">
<link rel="stylesheet" src="/dist/bar.css">
</head>
<body>
<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">
</body>
</html>
... will turn into this:
<html>
<head>
<link rel="stylesheet" src="/dist/bundle.css">
</head>
<body>
<script src="/dist/bundle.js">
</body>
</html>
This works very well for me using Angular 8.
source to share