如何将 Angular 添加到 Kotlin/Multiplatform \"Full Stack\" 应用程序?

分享于2023年02月15日 angular gradle intellij-idea kotlin kotlin-multiplatform 问答
【问题标题】:How to add Angular to Kotlin/Multiplatform "Full Stack" Application?如何将 Angular 添加到 Kotlin/Multiplatform \"Full Stack\" 应用程序?
【发布时间】:2023-02-11 16:27:45
【问题描述】:

我正在创建一个网络应用程序,目的是为客户端使用 Angular,为后端使用 Google 的 Cloud-Run。我尝试了一种不同的方法 ( asked previously ),但它最终无法完成同时管理后端代码的任务。

使用 IntelliJ,我创建了一个 Kotlin 多平台“全栈 Web 应用程序”,并编写了一些 commonMain 代码供两端使用。它构建并通过测试。

出现 目的是在 jvmMain 内编写后端代码,在 jsMain 内编写客户端代码。这似乎是合理的。后端看起来非常简单,因为在设置时所有内容都是手动添加的。

但是在客户端...... Angular 有一个 CLI 程序来设置它,并且创建的内容与现有的 src 目录结构不匹配,而且需要通过 ng build (或 npm build )构建,这是' 由为整个项目创建的 Gradle 配置调用。

另一种选择是让 IntelliJ 创建项目的新“Angular/CLI”模块,以某种方式引用主/项目级别的代码。我当然会(为了我的强迫症)将后端移动到它自己的并行模块中。但这似乎违背了将它们分别放在 jsMain jvmMain 中的意图。

将 Angular 添加到 Kotlin“全栈 Web 应用程序”并使其能够访问 commonMain 代码的最佳方法是什么?


【解决方案1】:

要将 Angular 添加到 Kotlin/Multiplatform 全栈应用程序,您可以遵循以下一般步骤:

使用 Angular CLI 设置一个新的 Angular 项目。

在 Kotlin/Multiplatform 项目中为 Angular 项目创建一个目录。

更新 Kotlin/Multiplatform 项目的构建配置,以将 Angular 项目包含在要编译和捆绑的源列表中。这通常可以在 build.gradle.kts 文件中通过将 Angular 项目的目录添加到 kotlin.sourceSets 部分来完成:

sourceSets {
val commonMain by getting {
    dependencies {
        // define common dependencies
    }
}

val angularMain by getting {
    dependencies {
        // define dependencies specific to the Angular project
    }
    resources.srcDir("../path/to/angular/project")
  }
}

为 Kotlin 后端和 Angular 前端之间的通信定义一个 API 层。这可以使用 Ktor 或 Spring Boot 等库来完成,具体取决于您的偏好。

使用公共模块实现 API 层,该模块可由 Kotlin 和 Angular 项目共享。该模块可以在您的 Kotlin/Multiplatform 项目的 src/commonMain/kotlin 目录中定义,并且应该包含 API 接口和数据类。

构建 Angular 项目并将编译后的文件复制到 Kotlin/Multiplatform 项目的构建输出目录中的适当位置。这通常可以使用 ng build 命令完成,然后将编译后的文件复制到 Kotlin/Multiplatform 项目的构建输出目录的 resources/static 目录中。

通过启动后端服务器并通过 Web 浏览器访问 Angular 前端,使用 Angular 前端运行 Kotlin/Multiplatform 项目。

请记住,这是一个大纲,实施每个步骤的细节可能会有所不同,具体取决于您的项目要求以及您使用的库和工具。

【讨论】: