How to get one file as output of angular cli

Question

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 et

Answer 1

On Windows you can use type instead of cat and follow a similar approach proposed by @Milad:

1: Extend the scripts in package.json

"build-prod": "ng build --prod --output-hashing=none",
"package-es5": "cd dist/app-name && type runtime-es5.js polyfills-es5.js main-es5.js > bundle-es5.js",
"package-es2015": "cd dist/app-name && type runtime-es2015.js polyfills-es2015.js main-es2015.js > bundle-es2015.js",
"bundle": "npm run build-prod app-name && npm run package-es5 && npm run package-es2015",

2: Run the bundling process

npm run bundle

3: Replace the scripts automatically added in index.html manually

To overcome the manual step, I'm using the following workaround:

1: Create an empty placeholder.html in the same folder as index.html

2: Copy the index.html file and rename it to index.prod.html

2: Modify index.prod.html with static stylesheet and scripts

4: Add index.html to the assets array in angular.json

"app-name": {
  "architect": {
    "build": {
      "options": {
        "assets": [
          "projects/app-name/src/index.html",
          ...
        ],

5: Modify the index entry in angular.json to point to placeholder.html and replace index.html with index.prod.html

"app-name": {
  "architect": {
    "build": {
      "configurations": {
        "production": {
          "index": "projects/app-name/src/placeholder.html",
          "fileReplacements": [
            {
              "replace": "projects/app-name/src/index.html",
              "with": "projects/app-name/src/index.prod.html"
            },
            ...
          ],