Platform specific Component - Angular


#1

Hi,

I have an issue for specific platform dev. I’m using my plugin nativescript-bottombar which is Android specific. Here is my component:

import { SelectedIndexChangedEventData, TITLE_STATE, BottomBar, BottomBarItem } from 'nativescript-bottombar';

if (isAndroid) {
    registerElement('BottomBar', () => BottomBar);
}

So, I thought this would work, but it doesn’t since {N} include only modules which support platform which means that in my iOS build the module isn’t added (lighter build so great).

My solution was to implement two different component *.component.android.ts ans *.component.ios.ts. {N} recognise the platform specific pattern and generate only one component depending of the platform.

My problem is actually in my app.routing.ts file, I will have a ts compilation error if I just import *.component.ts, so I have to import both components but it’s not logical since {N} will compute the components in one so here is what I did in the first place :

import {RootComponentAndroid} from './root/root.componentAndroid.ts'
import {RootComponentIos} from './root/root.componentIos.ts'
import { isIOS } from 'platform';

let rootComponent;
if (isIOS) {
    rootComponent = RootComponentIos;
} else {
    rootComponent = RootComponentAndroid;
}

const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    {
        path: 'root', component: rootComponent, children: [
           .
           .
       ]
    }
];

But this doesn’t work neither, I got the same error Error module can't be found. So I understood that event if I wasn’t using the module in iOS I still got this error since I’m still importing the Android component which import the module.

Working solution:

if (isIOS) {
    rootComponent = require('./root/root.componentIos').RootComponentIos;
} else {
    rootComponent = require('./root/root.componentAndroid').RootComponentAndroid;
}

Obviously I removed the imports. So this solution works but I find it kind of dirty.
I would l like a much cleaner solution that’s why I’m making this post! I hope somebody will be able to help me!

Thanks :smile:


Android TabView to look like iOS
#2

This was helpful information, I was with the same problem. That solved. Thank you.


#3

Hi,

I have a similar situation… but on my case is just a method inside some.component.ts that is different for each platform… How do I do this?

  • some.component.ts
  • some.component.android.ts
  • some.component.ios.ts

do I create a interface? do I extend? lost… pls help…


#4

You can create a your.component.d.ts file for your component with this:
export declare class YourComponent {}
To satisfy tsc compiler,
Then have your your.component.ios.ts and your.component.android.ts and you will be able to import as normal (without the platform suffix since all you need is symbol (which is resolved properly at runtime).
The other consideration is your tsconfig.json if you use “includes” you’ll wanna make sure you include both suffixed files (since they wouldn’t compile otherwise) - if you use the default “excludes” it should be fine as it will compile everything that’s not excluded.


#5

Do you have any idea about this issue, I guess these are somewhat similar?


#6

Works great! thank you ^^

p.s - at least the “tns run android”, about build cmd don’t know yet


#7

Please let us know about build command when you try it, I had been facing issues with webpack + platform specific files.