[question] How to use platform specific code in libs?

[fpaaske]

It's me again :)

This time it's a question on how to do platform specific code in the libs. Here's my current issue:

I have these files under libs/nativescript-utils:

• src/lib/nativescript-utils.d.ts
  • export function nativescriptUtils(): string;
• src/lib/nativescript-utils.android.ts
• src/lib/nativescript-utils.ios.ts
• src/index.ts
  • export * from './lib/nativescript-utils';

Then I import the nativescriptUtils() in the app. When running the app I get this error:

ERROR in ../../libs/nativescript-utils/src/lib/nativescript-utils.ios.ts
Module build failed (from ../../node_modules/@ngtools/webpack/src/index.js):
Error: /Users/frank/git/private/nx-mobile-test/libs/nativescript-utils/src/lib/nativescript-utils.ios.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /Users/frank/git/private/nx-mobile-test/node_modules/@ngtools/webpack/src/ivy/loader.js:64:26
 @ ../../libs/nativescript-utils/src/index.ts 1:0-41 1:0-41
 @ ./src/features/home/components/home.component.ts 2:0-71 12:41-58
 @ ./src/features/home/home.module.ts 5:0-50
 @ ./src/app.routing.ts 15:28-65
 @ ./src/app.module.ts 3:0-49 10:89-105
 @ ./src/main.ts 6:0-41 11:69-78

I did the same exercise under apps, d.ts + ios.ts + android.ts + index.ts -> same issue -> solved it by adding "**/*.ios.ts" to includes in tsconfig.app.json. But no matter what I do in the libs and tsconfig.json or tsconfig.lib.json, it's not being picked up.

Do you have any tips on how to fix this?

[NathanWalker]

Hi @fpaaske yes, you can configure any app's tsconfig.app.json for platform specific libs as follows:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "types": []
  },
  "include": ["./src/environments/environment.*.ts", "../../libs/nativescript-*/**/*.android.ts", "../../libs/nativescript-*/**/*.ios.ts"],
  "files": ["./references.d.ts", "./src/main.ts", "./src/polyfills.ts"]
}

That would allow any platform specific code to be compiled into your Angular app.

You can also learn from this sample repo I just uploaded here: https://github.com/NathanWalker/nx-ns-examples

This illustrates a single library sharing a utility platformLog that provides a pure platform log using APIs only available on the target platforms as an example. The root app.component of the app uses the lib as follows:

import { Component } from '@angular/core';
import { platformLog } from '@nxplatform/nativescript-utils';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  constructor() {
    platformLog(`Hi from a direct ${global.isIOS ? 'iOS' : 'Android'} log message.`);
    platformLog(`We can custom tag them too like this.`, 'my-log-tag');
  }
}

For iOS, if the Console app on macOS is launched, one would see the logs only from the platform message stream (and hidden from node terminal output - this is useful for production only logging for example) as seen here:

For Android, one could run adb logcat to get the devices streamed messages and see them there:

[fpaaske]

Thank you so much! This was exactly what I was looking for. And thanks for taking the time to also provide an example repo, it's super useful!