How to import commonMain classes into Angular (ts) app?


I have a Kotlin/MP project with a java backend and typescript (Angular) frontend.

My commonMain source has classes defined like this:

package com.mydomain.myapp.common.mapthings

class DisplayLayer {

When I build, it creates a js/ts library like this:


To date, I've been importing this library into my Angular components like this:

import * as myapp_top from "myapp";
import myapp_common =;
import DisplayLayer = myapp_common.mapthings.DisplayLayer;

This works just fine.  Behind the scenes, it's importing the entire common library into every component but Angular takes care that it is included only once in the generated main.js file.

I'm now trying to break my Angular app into lazily-loaded modules and background worker threads.  The result is that the full common library is included in the base app even if any given module needs only part of it.  Worse is that the entire library gets included inside every generated worker.js file even if only a single class is needed from it.

What is the proper way to import individual classes from the generated common library?

-- Brian



In theory the best way is to generate es modules instead of common.js. And we are working to make it possible for compiler to generate per file es modules. In this case you can import only necessary declarations, and other can be tree-shaked by bundler (which is Angular implicitly using).

As for now, compilation unit is Kotlin module (equals to Gradle module), you can organize separate modules for different use cases, and declare `@JsExport` on the declarations in this separate modules.


Is there a rough timeline for when ES output will be available?

I'm not in any particular rush so I'll just wait for that instead of trying to split the Gradle build.


White Bc Unfortunately, we don't have any ETA. Please follow this issue -