[Question] How to use it for shared code

Hi, our app is an {N} Angular / Web + Android hybrid app and has been upgraded to NativeScript 8. It stopped working. On Discord I’ve got the info the schematics are not supported anymore and I have to use xplat if I want to maintain the shared code.

I’ve created a new workspace added xplat and now I’m stuck because:

• all of the docs and youtube podcasts are outdated even the folder structure is different (xplat folder went to libs)
• there’s no information on how to use it for shared code
• nothing is working the way as NX tutorials explain, for example nx g lib --parentModule=xy doesn’t work, and when I add a library with --routing and --lazy the routes don’t appear in the parent project
• I can’t add a component below a parent lib (--project=main-ui), I’m getting error reports about I have to use platform prefix which I don’t understand

Can I get some support here? I just need an example where I can see how the code sharing works between nativescript and web (angular) project.

Another questions:

• What is the difference between ng g component and ng g feature?
• How can I add subfolders? nx g feature doesn’t have --directory parameter? I would like to organize my features, for example, pages would go into the pages folder.
• what is the default shared.module for? Why UI module has been wrapped into shared.module? Why not importing UI module itself directly?

[NathanWalker]

@csimpi Hi, When coming from @nativescript/schematics (or nativescript-schematics) there’s a few important things to understand on the surface:

In @nativescript/schematics (or nativescript-schematics) you might have something like this:

src/app/account/account.component.html
src/app/account/account.component.tns.html
src/app/account/account.component.tns.ts
src/app/account/account.component.ts

With Nx+xplat it would look like this:

libs/xplat/features/src/lib/ui/base/account.base-component.ts
libs/xplat/nativescript/features/src/lib/ui/components/account/account.component.html
libs/xplat/nativescript/features/src/lib/ui/components/account/account.component.ts
libs/xplat/web/features/src/lib/ui/components/account/account.component.html
libs/xplat/web/features/src/lib/ui/components/account/account.component.ts

The above uses a unique option createBase (which is optional and off by default) but used when you want to drive platform decorated components with one singular class logic (account.base-component). This component structure can be generated in your own workspace with this command (using dry-run so you can try it and see result without actually generating):

nx generate @nstudio/angular:component --name=account --createBase --platforms=nativescript,web --no-interactive --dry-run

This allows any app in the Nx workspace to simply consume that component however it needs. For example, given you have 1 web app and 1 nativescript app in your workspace (created using nx g app and choosing the appropriate platform), you would have a structure of apps like this:

apps
  web-myapp
  nativescript-myapp

Each of those apps can import the component from the specific location cleanly:

For apps/web-myapp, it could import that component like this:

import { AccountComponent } from '@yourscope/xplat/web/features';

For apps/nativescript-myapp, it could import that component like this:

import { AccountComponent } from '@yourscope/xplat/nativescript/features';

Same component name, no custom file extensions, natural folder organization for code, clarity in what you are dealing with (what platform is this thing?) leading to no custom file extension loaders, no overhead in maintenance and natural webpack handling.

There’s more I can share later but that’s one of biggest things to understand to start with.

[s0l4r]

This is a great question with great answers! I was just wondering the same thing. I am just getting into Xplat, seems you have really been thinking when you did the design, great job! You should post these examples on your web @NathanWalker, including the use case with the directories. Thanks for this!