IntelliJ Angular Project with Kotlin/JS Library?

Question

I have a library of Java code from Android development and I'd like to reuse that in a web-app version of the same. The library code is quite generic as it was always intended to be re-usable and has, in the past, been used to generate Android/Java, App-Engine/Java, iOS/ObjC, and GWT apps.

Looking around, I think the best framework for the web app would be Angular. Rewriting the library code to Kotlin should be a relatively minor task as there are tools to do most of the work. Then it can be compiled for the JVM (for native and backend apps) or JavaScript (for web apps).

While advice for/against this plan is welcome, my actual question is...

How do I set up an IntelliJ project to do this?

I thought the obvious answer would be two modules: one for the lib and one for the app but IntelliJ doesn't allow creating a Kotlin module, only a Kotlin project.

Instead, I made a Kotlin/JS project and used Angular/CLI to create the app module beneath it (with a backend app to sit beside it sometime in the future). The library builds and the sample app runs but I haven't been able to get the latter to include the generated JS (plus .d.ts ) code of the former which sits in some deep directory under build/ . So maybe I'm going about it all wrong...

Answer 1

Wow, that was rough, After many hours of Google searches and attempts that failed. here is something that works. Perhaps I'll find cleaner methods down the road but this is acceptable for now.

Note: I wasted too much time on gradle plugins for my liking. If they're not first-party, they tend to be unmaintained, poorly documented (largely assuming that the reader already knows what they're doing), and out of date. What follows is done only with first-party support programs.

Create a top-level project with Angular/CLI followed by sub-projects for the app and library:

ng new MyGeneralProject --no-create-application
ng generate library klib
ng generate application MyApp

Now set up Gradle in the top-level directory (or wait and do this via the IDE):

gradle init
gradle wrapper

Open the top-level in IntelliJ. Create/edit the top-level build.gradle.kts file:

buildscript {}
plugins {}
repositories {}

More important is the top-level settings.gradle.kts file:

rootProject.name = "MyProject"
include("projects:klib")

This will now access the projects/klib/gradle.build.kts file:

plugins {
    kotlin("js") version "1.8.0"
}

repositories {
    mavenCentral()
    //jcenter()
}

dependencies {
    //testImplementation(kotlin("test")) // The Kotlin test library
}

kotlin {
    sourceSets {
        all {
            // allow @JsExport without opt-in each time
            languageSettings.optIn("kotlin.js.ExperimentalJsExport")
        }
        val main by getting {
            kotlin.srcDir("src")
        }
    }

    js(IR) {
        moduleName = "klib"
        browser {
            distribution {
                directory = File("$projectDir/../../dist/$moduleName")
            }
        }
        binaries.library()
    }
}

The above uses the kotlin("js") plugin for Gradle but that's provided by JetBrains as part of IntelliJ who also maintain the Kotlin language libraries. Though the documentation for it also assumes you already know everything about Gradle, it n.netheless works just fine.

The built JS/TS library will be created under the top-level directory as "dist/klib". This naming could use some improvement but it's a reasonable starting point.

In the top-level tsconfig.json file, under "compilerOptions", look for "paths" and update as desired. I went with a leading "@" to indicate a top-level import location:

{
  ...
  "compilerOptions": {
    ...
    "paths": {
      "@klib": [
        "dist/klib"
      ]
    }
    ...
  },
  ...
}

In the projects/myapp/src/app/whatever.ts file, access the converted Kotlin library:

import * as klib from '@klib'

Then the entire library is available as klib.blah.blah.blah with IntelliJ providing full completion semantics.