My hobby site that I'm trying to migrate to Angular has a bunch of standalone JS code (ESM modules) in it that is just sat in the default public assets directory, and as such it's automatically copied into the site structure by ng build.
Where and how can I add TypeScript code (separate from any component) so that it's automatically transpiled into JS code and callable from both the old code and from new components?
The current structure looks like this:
+- src
| +- app/
| | +- components, etc
| +- index.html
| +- main.ts
+- public
+- js/
+- css/
I was unable to find a suitable solution in the time I had available, and had no useful answer from the Angular developers on GitHub so I bit the bullet and converted all of my ESM JS code into TypeScript, and set up rollup to build bundles of code as needed for each of the four legacy JS apps, and another for the code that is shared by all four.
The solution is not entirely satisfactory as I have as yet found no way to automatically select either a development build or a minified production build to import into the legacy code.
That is, in my ESM code I have to write:
import { MyClass } from './bundle.min.mjs';
or alternatively end up with two separate rollup configs that are identical in every way except for the minifier configuration.
Being outside of the Angular build system also means that I have to run rollup separately each time I modify the source that goes into those bundles.
Longer term I expect to rewrite all four apps in Angular with TypeScript, at which point all of the above problems will become moot.