如何在IntelliJ中搭建Angular项目并集成Kotlin/JS库？

一、核心思路：用Gradle多项目构建替代嵌套结构 #

别再用「Kotlin/JS项目套Angular模块」的方式，Gradle多项目结构能完美分离Kotlin多平台库（支持JVM/JS）和Angular应用，还方便后续添加后端模块。

二、具体搭建步骤 #

1. 创建根Gradle项目 #

• 打开IntelliJ，选「New Project」→「Gradle」（别选Kotlin项目，选基础Gradle模板），或者直接建空项目后手动配置Gradle。
• 根项目的settings.gradle.kts里声明子模块：

rootProject.name = "你的项目根名称"
include(":shared-kotlin-lib")
include(":angular-app")
// 后续加后端模块的话，比如 include(":backend-jvm-service")

2. 创建Kotlin多平台库模块 #

• 在根项目右键→「New」→「Module」，选「Kotlin Multiplatform」（IntelliJ支持创建这个模块，不是只能建独立Kotlin项目）。
• 模块名设为shared-kotlin-lib，勾选JVM和JS平台（JS选Browser，适配Web场景）。
• 编辑模块的build.gradle.kts，确保JS编译出Angular能识别的文件：

kotlin {
    jvm {
        // 按需配置JVM目标版本等
    }
    js(IR) {
        browser {
            binaries.executable()
        }
        compilations.all {
            kotlinOptions {
                sourceMap = true
                moduleKind = "es2015" // 和Angular的模块格式对齐
                declarationDir = file("build/js/packages/shared-kotlin-lib/kotlin") // 指定.d.ts输出目录
            }
        }
        // 配置发布到本地Maven仓库，方便Angular引入
        publishing {
            publications {
                create<MavenPublication>("js") {
                    from(components["js"])
                }
            }
        }
    }
    sourceSets {
        val commonMain by getting // 通用Kotlin代码放这
        val jvmMain by getting // JVM平台专属代码
        val jsMain by getting // JS平台专属代码
    }
}

• 把转好的Kotlin代码放到shared-kotlin-lib/src/commonMain/kotlin目录下即可。

3. 集成Angular应用模块 #

• 打开终端，在根项目目录下用Angular CLI创建应用：

ng new angular-app --directory angular-app

• 给Angular添加Kotlin库依赖，两种可选方式：
  • 方式一：本地Maven依赖（推荐）
    先在Kotlin库模块执行./gradlew publishToMavenLocal，然后在Angular的package.json里加：

    "dependencies": {
        // 其他原有依赖
        "shared-kotlin-lib": "1.0.0" // 对应你Kotlin库的版本号
    }
    

  • 方式二：直接引用本地构建产物
    先修改Angular的angular.json，在build.options.allowedCommonJsDependencies里加shared-kotlin-lib，然后在package.json中添加本地依赖：

    "dependencies": {
        // 其他原有依赖
        "shared-kotlin-lib": "file:../shared-kotlin-lib/build/js/packages/shared-kotlin-lib"
    }
    

• 执行npm install后，就能在Angular代码里直接用Kotlin库了：

import { YourKotlinClass } from 'shared-kotlin-lib';

// 使用示例
const instance = new YourKotlinClass();
instance.yourMethod();

4. 统一构建与运行 #

• 在IntelliJ的Gradle面板里，可单独构建Kotlin库（shared-kotlin-lib:build），也可以运行根项目的build任务构建所有模块。
• Angular应用还是用ng serve启动、ng build构建，记得先确保Kotlin库已经构建完成。

三、常见问题排查 #

• 如果Angular识别不了.d.ts文件：检查Kotlin库的declarationDir配置是否正确，确认构建后该目录下有生成的声明文件，同时在Angular的tsconfig.json里把node_modules/shared-kotlin-lib/**/*.d.ts加入include字段。
• 模块格式不兼容：确保Kotlin JS的moduleKind设为es2015或commonjs，和Angular的模块格式匹配。

内容的提问来源于stack exchange，提问作者Brian White