0

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/
Improve this question
1
  • It is not enough information. The easiest way is to include public dir in angular app, create additional tsconfig in public dir and directly use ts compiler to transpile ts files.
    – kemsky
    Commented Sep 23, 2024 at 13:19

2 Answers 2

Reset to default
2

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.

Improve this answer
1

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

Improve this answer
2
  • I don't believe this addresses the crux of the problem, which is that I have non-Angular projects on the same site that need to make use of that same ESM code. IIUC, the Angular build system will only bundle those source modules that are made use of from the specified Angular projects.
    – Alnitak
    Commented Sep 25, 2024 at 6:31
  • @Alnitak the original question never mentioned the need to share code between multiple applications, because you always talked about a single website. If you only have a single website, the solution is that all javascript should be included in the build/bundle process, including the code that doesn't directly use Angular. If you have multiple, some of which do not have a bundler, you need a shared library. Rewriting all your code in typescript is never required, in fact most bundler works with ESM better than they do with Typescript
    – pqnet
    Commented Oct 3, 2024 at 14:01

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.