How do I get sourcemaps my original TypeScript code using rollup and terser?

Question

A similar question was asked here: Rollup is not generating typescript sourcemap

..but about rollup with svelte for minification (with which I'm not familiar) rather than terser. I'm not sure how much of a difference that makes. I copied the suggested solution, resulting in this rollup.config.js:

import { terser } from 'rollup-plugin-terser';
import typescript from '@rollup/plugin-typescript';

export default [
  {
    input: 'dist/index.js',
    output: [
      {
        file: 'dist/cjs/index.js',
        format: 'cjs',
        sourcemap: true
      },
      {
        file: 'dist/fesm2015/index.js',
        format: 'es',
        sourcemap: true
      }
    ],
    plugins: [
      terser({ output: { max_line_len: 511 } }),
      typescript({ sourceMap: true, inlineSources: true })
    ]
  }
];

I've tried various combinations of source map flags, like setting the TypeScript plugin sourceMap option to false, and using sourcemap: true in my output configs, but none of that has helped create sourcemaps to the original TypeScript. I get maps only to the JavaScript-ized version of my TypeScript code.

And not to detract from the question I'm asking, but...

A useful Angular tip I learned along the way...

            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": {
                "scripts": true,
                "styles": true,
                "vendor": true
              },

I was going crazy with not being able to trace into anything but mangled, compressed code, with the browser's debugger refusing to stop anywhere but the first line of the mangled code... until I figured out that, by default, even in development mode, Angular only serves up sourcemaps to your Angular project code, not for any of your npm dependencies.

The detailed version of "sourceMap" is needed in yourangular.json, not just a simple true flag, but the specific details, including "vendor": true.

Answer 1

The answer is (as always, it seems)... MORE plugins!

In this case, the rollup-plugin-sourcemaps plugin.

import sourcemaps from 'rollup-plugin-sourcemaps';
import { terser } from 'rollup-plugin-terser';
import typescript from '@rollup/plugin-typescript';

export default [
  {
    input: 'dist/index.js',
    output: [
      {
        file: 'dist/cjs/index.js',
        format: 'cjs'
      },
      {
        file: 'dist/fesm2015/index.js',
        format: 'es'
      }
    ],
    plugins: [
      sourcemaps(),
      terser(),
      typescript({ sourceMap: true, inlineSources: true })
    ]
  }
];

This apparently is needed to do the magic necessary to utilize the map files generated by the TypeScript compiler.