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/
1
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.
If the code is compatible with typescript compiler options that you already have for Angular, you should just put all the ESM code in the src directory and let Angular toolchain bundle it for you. It doesn’t need to be typescript you can configure Angular to ingest plain javascript files, and the import/require statement that you use to refer to that code will be automatically handled for you.
How you do that in detail depends on what version of angular you are on, since they changed the build pipeline multiple times.
In many cases would need to configure the entry points, i.e. the files that you import directly from the HTML page, so that they are not discarded as unused, other than that you should be ok
2