@angular-devkit/build-angular:browser - Ability to build app as a single bundle

[dinbtechit]

🚀 Feature request

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Description

Ability to build app as a single bundle.

Describe the solution you'd like

angular.json: projects -> "project-name" -> architect -> build -> Configuration: (new Options to bundling the js as single output)

. . 

"architect": {
 "build": {
     "options": {
         "scripts": [
            {
               "input": "custom-script1.js",
               "bundleName": "my-custom-script1"
             },
              {
               "input": "custom-script2.js",
               "bundleName": "my-custom-script2"
              }
            ]
       },
       "configuration" : {
       "production" : {
           "singleBundle": {
               "path": "dist/project-name/"
               "name": "single-bundle"   <<---<<< // Single js bundle contains (runtime.js, main.js, polyfills.js, custom-script1.js, custom-script2.js)
           }
        }
      }
  }
. . .

Usage:

ng build project-name

Output expected:

1. Dist folder

   dist/single-bundle.js
   dist/runtime.js
   dist/main.js
   dist/polyfill.js
   index.html
   . . .
   

2. Index.html to include the single-bundle.js

   <script src="single-bundle.js" type="module"></script>
   

Describe alternatives you've considered

1. ngx-build-plus does provide the ability to build as a single file. It would be nice if angular devkit can provide this.

[alan-agius4]

What’s the use-case of needing a single JS file?

[dinbtechit]

When distributing the Angular Elements for "non-angular" apps. The consuming app requires to include runtime.js, main.js, polyfills.js, and other custom scripts individually. It would be nice if they can be bundled in one js file.

Some of our angular components are being used in PHP and .Net Applications which are hosted & owned by a different company. They don't have access to the source code nor have access to the dist directory. They consume the runtime.js & main.js from our hosted angular app.

[daniel-brenot-apcapital]

I'm seconding this. I've created a library at an old job that made a map that was meant to be embedded into websites. I had to concatenate the files together with some really weird and janky tooling to get a single file, and i don't imagine it's super stable. Having a single file output is a requirement for that use case.

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.