Intellij Idea 如何将Angular添加到Kotlin/多平台“全栈”应用中?

piah890a  于 2023-02-11  发布在  Angular
关注(0)|答案(1)|浏览(138)

我正在创建一个Web应用程序,打算使用Angular作为客户端,使用Google的Cloud-Run作为后端。我尝试了一种不同的方法(asked previously),但它最终无法完成管理后端代码的任务。
使用IntelliJ,我创建了一个Kotlin多平台“全栈Web应用程序”,并编写了一些两端都可以使用的commonMain代码。
看起来我们的意图是在jvmMain中编写后端代码,在jsMain中编写客户端代码。这看起来很合理。后端看起来很容易,因为在设置时所有内容都是手工添加的。
不过,在客户端... Angular有一个CLI程序来进行设置,创建的内容与现有src目录结构不匹配,而且需要通过ng build(或npm build)构建,而为项目创建的Gradle配置不会调用ng build(或npm build)。
另一个选择是让IntelliJ创建一个新的项目“Angular/CLI”模块,以某种方式引用主/项目级别的代码。当然,我必须(为了我的OCD)将后端移到它自己的并行模块中。但这似乎违背了分别在jsMainjvmMain中使用它们的意图。

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

zsohkypk1#

要将Angular添加到Kotlin/多平台全栈应用程序,您可以遵循以下一般步骤:
使用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或Sping Boot 之类的库来完成,这取决于您的偏好。
使用公共模块实现API层,该模块可以由Kotlin和Angular项目共享。该模块可以在Kotlin/Multiplatform项目的src/commonMain/kotlin目录中定义,并且应该包含API接口和数据类。
构建Angular项目并将编译后的文件复制到Kotlin/Multiplatform项目构建输出目录中的适当位置。通常可以使用ng build命令完成此操作,然后将编译后的文件复制到Kotlin/Multiplatform项目构建输出目录的resources/static目录。
通过启动后端服务器并通过Web浏览器访问Angular前端,使用Angular前端运行Kotlin/多平台项目。
请记住,这只是一个概述,实现每个步骤的细节可能会因项目的要求以及所使用的库和工具而异。

相关问题