3

I created and simple kotlin multi platform application and i want to use it on angular project via publishing on npm.

Here is my build.gradle.kts file

plugins {
    kotlin("multiplatform")
    kotlin("native.cocoapods")
    id("com.android.library")
}

version = "1.0"

kotlin {
    android()
    iosX64()
    iosArm64()
    iosSimulatorArm64()

    js {
        browser {
            webpackTask {
                output.libraryTarget = "this"
            }
            binaries.executable()
        }
    }
    
    sourceSets {
        val commonMain by getting
        val commonTest by getting {
            dependencies {
                implementation(kotlin("test"))
            }
        }
        val androidMain by getting
        val androidTest by getting
        val iosX64Main by getting
        val iosArm64Main by getting
        val iosSimulatorArm64Main by getting
        val iosMain by creating {
            dependsOn(commonMain)
            iosX64Main.dependsOn(this)
            iosArm64Main.dependsOn(this)
            iosSimulatorArm64Main.dependsOn(this)
        }
        val iosX64Test by getting
        val iosArm64Test by getting
        val iosSimulatorArm64Test by getting
        val iosTest by creating {
            dependsOn(commonTest)
            iosX64Test.dependsOn(this)
            iosArm64Test.dependsOn(this)
            iosSimulatorArm64Test.dependsOn(this)
        }
    }
}

android {
    compileSdk = 32
    sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml")
    defaultConfig {
        minSdk = 21
        targetSdk = 32
    }
}

Sample Greeting Class File in KMP Project

@JsExport
data class Greeting(val title: String, val row: Int) {

    fun helloWorld() {
        print("TEST Hello World")
    }

}

When i run gradle build command js folder appearing under the build folder and its looks like this.

enter image description here

I removed this JS folder from the project and put into the new github repository and then i publish the new github repository to the npm.

Here is the project that i publish on npm.

https://www.npmjs.com/package/bf-shared-mw

It has been great until now

After then i created a angular project and add this library as a dependecy

"bf-shared-mw": "^1.0.1",

It's depended with successfully

But when i want to use it in components classes like the codes as you see below

import { Component, OnInit } from '@angular/core';
import { Greeting } from 'bf-shared-mw';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

  ngOnInit(): void {

    const greetings = Greeting();

    
    
  }

  title = 'angular-tour-of-heroes';

}

bf-shared-mw Throwing errors and i cant access the Greeting class

enter image description here

What am i doing wrong ? How can i use my kotlin multi platform library on react or angular applications ?

ALKIN ÇAKIRALAR
  • 237
  • 2
  • 14
  • You should be importing the `lib` instead of `Greeting` and then do `lib.Greeting()`. Check the `js` file and see what's the export name of your project. – shaktiman_droid Jun 26 '22 at 14:31

0 Answers0