如何在TypeScript Angular应用中调用Kotlin库并解决依赖加载报错

Hey there, let's get that Kotlin library working in your Angular app properly—no more messy script tags in index.html. Here's a step-by-step solution:

Step 1: Properly Load Kotlin via Angular's Build Configuration #

You already ran npm install --save kotlin, but we need to tell Angular to include it in the bundle instead of relying on a global script tag.

Open your angular.json file, find the architect > build > options > scripts array, and add the path to the npm-installed kotlin.js:

"scripts": [
  "node_modules/kotlin/kotlin.js"
]

This ensures Kotlin loads before your custom library, which fixes that dependency error you're seeing.

Step 2: Include Your Custom Kotlin Library in the Build #

Next, you need to bundle your compiled Kotlin library (let's assume it's called rpn-calculator.js) alongside Kotlin.

If your library's JS file is in the src/assets/kotlin folder, add it right after kotlin.js in the scripts array:

"scripts": [
  "node_modules/kotlin/kotlin.js",
  "src/assets/kotlin/rpn-calculator.js"
]

If you've published your Kotlin library as an npm package, install it with npm install --save your-kotlin-lib and reference it like the kotlin.js file (e.g., node_modules/your-kotlin-lib/dist/rpn-calculator.js).

Step 3: Add Type Definitions for TypeScript #

TypeScript doesn't know about your Kotlin service's types out of the box, so we'll create a type declaration file to avoid "unknown type" errors.

Create a new file src/types/kotlin-lib.d.ts with this content (adjust the methods to match your RpnCalculatorService):

declare class RpnCalculatorService {
  constructor();
  // Example method—replace with your service's actual methods
  calculate(rpnExpression: string): number;
}

// Optional: If you want to import it as a module
declare module 'rpn-calculator' {
  export default RpnCalculatorService;
}

Then update your tsconfig.json to include this type file:

"include": [
  "src/**/*",
  "src/types/**/*"
]

Step 4: Instantiate and Use the Service in Angular #

Now you can use the RpnCalculatorService in your components or services. Here's how to do it in a component:

Option 1: Using Global Declaration #

import { Component, OnInit } from '@angular/core';

// Declare the service class since it's available globally from the script bundle
declare const RpnCalculatorService: any;

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html'
})
export class CalculatorComponent implements OnInit {
  private calculator: RpnCalculatorService;

  ngOnInit(): void {
    // Instantiate your Kotlin service
    this.calculator = new RpnCalculatorService();
  }

  computeResult(expression: string): number {
    // Call the service's method
    return this.calculator.calculate(expression);
  }
}

Option 2: Import as a Module (if you set up the module declaration) #

import { Component, OnInit } from '@angular/core';
import RpnCalculatorService from 'rpn-calculator';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html'
})
export class CalculatorComponent implements OnInit {
  private calculator: RpnCalculatorService;

  ngOnInit(): void {
    this.calculator = new RpnCalculatorService();
  }

  // ... same computeResult method
}

Quick Troubleshooting #

• Order matters: Make sure kotlin.js is listed before your library's JS file in the scripts array—Angular loads them in order.
• CommonJS warnings: If you're on Angular 14+, add "kotlin" to the allowedCommonJsDependencies array in angular.json's build options to suppress warnings:

  "build": {
    "options": {
      "allowedCommonJsDependencies": ["kotlin"],
      // ... other options
    }
  }
  

• Kotlin compilation: Ensure your Kotlin library is compiled to a JS version compatible with your Angular target (ES5 or ES6—check your tsconfig.json's target setting).

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