Provide a way to map entrypoint source files to entrypoint bundles

[eblocha]

Command

build

Description

With a build configuration such as:

{
  "browser": "src/main.ts",
  "styles": ["src/styles.css"]
}

I would like to be able to map browser -> main-[hash].js and styles -> styles-[hash].css reliably after a build.

We are using Angular for micro-frontends. When these micro-frontends are deployed, we need to allow the shell application to discover the correct files for each app entry point. There is a service that tracks these mappings in a manifest, and the shell requests this manifest on startup. During deployment, we need to tell this service what the entry point files are.

Today, our only options to do this are to use filename heuristics or build with source maps and parse those to look for the sources field.

Describe the solution you'd like

The @angular/build:application builder should provide an option to output a file which can map these source file entrypoints to a corresponding output file.

Basic Example

{
  "browser": "src/main.ts",
  "styles": ["src/styles.css"],
  "manifest": true
}

Would generate in dist/app/browser/manifest.json

{
  "browser": "main-[hash].js",
  "styles": "styles-[hash].css"
}

Multiple Style Bundles

If you have multiple style bundles, it would split those in the manifest. This is important because fonts have to be loaded at the root of the document, but shadow-dom components used for custom elements need a separate bundle to load into their shadow root.

{
  "browser": "src/main.ts",
  "styles": [
    {
      "bundleName": "styles",
      "input": "src/styles.css"
    },
    {
      "bundleName": "fonts",
      "input": "src/fonts.scss"
    }
  ]
}

Manifest:

{
  "browser": "main-[hash].js",
  "styles": {
    "styles": "styles-[hash].css",
    "fonts": "fonts-[hash].css"
  }
}

Describe alternatives you've considered

1. Use file name heuristics to guess which bundle files map to input sources. For example, look for a file name matching a regex like ^main-[^-].js$ for the main entry point, or ^styles-[^-].css$ for styles.

• Angular may change the output file naming scheme, and the heuristic will no longer work.
• There may be lazy chunks that happen to end up with a file name that matches the entry point pattern.

2. Parse index.html for entry point files.
3. Parse source maps and look for an entry in sources matching the entry point filename.

• After optimization, certain entry files can be omitted from the sources array. For example, if two stylesheets have the same content, only one will be in the sources array.

// angular.json options
{
  // assume these two files have the same content
  "styles": ["styles-1.css", "styles-2.css"]
}

The build merges them and deduplicates the style, generating a sourcemap with sources like this:

{
  "sources": ["styles-2.css"]
}