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

[dinbtechit]

🚀 Feature request

Command (mark with an x)

• [ ] new
• [X] 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[bot]]

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[bot]]

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.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

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

[alan-agius4]

This is currently not in scope of the webpack based builder.

This however is possible using the esbuild builder by putting all the polyfills and scripts into the main file.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}