NativeScript/nativescript-angular

Question - Showing an nativescript angular app in a angular website

kriefsacha opened this issue · 4 comments

kriefsacha commented

Hi,

First of all i would like to thank you for all your work that help us very much.

I wanted to know if something that we want to do is possible or if you heard about something.

We have a nativescript angular android and ios app, and we would like to do the same in web.

Instead of doing everything from scratch, we wanted to know if thats possible to show the app in a angular website ( with an emulator maybe or something else ).

I would like to know what you think, if i'm not clear enough please tell me.

Have a nice day !

lostation commented
kriefsacha commented

@lostation first of all thank you very much for you fast answer !

Yeah i meant or that or be able to run the same code but in the web.

About the 'shared' project, can i turn my current project (which is an android/ios nativescript angular project) into a shared project ?

For that i will need to change the current code (ts, html ..) of my project into web stuff ?

Thank you !

lostation commented

Yes... check the link I've provided above.
You should find all the answers you're looking for.

In fact...NS6 was using a .tns.ts suffix extension to differentiate NS files from WEB files...and that was great.

But now from NS7 it's over -> a new way of doing a shared project has come.
(Currently I'm still using NS6 way... but I will probably be forced soon to do the same)

So Check Nrwl with Nativescript/nx
Some dedicated folders architecture to contain the web side of your app, another folder containing only the mobile and a shared folder to...share between sub projects. The goal is to share and re-use as much as you can to avoid rewrite too much stuff.

edusperoni commented

Code sharing should be done with nx. I've written more in-depth here: #2290 (comment). You can also find more information further down the thread.

You might believe that you just need a different html file for your components, but the reality of it is that if you just need a different html file your app performance is probably suffering and you'll need different ts files that change 1 or 2 lines, so it's easier to write base classes and extend them in an nx workspace instead.

The idea is:

  1. Create an nx workspace
  2. Create/move your nativescript application apps/ns-app
  3. Create/move your web angular application apps/web-app
  4. npx nx g @nrwl/angular:lib shared (this will create @yourworkspace/shared)
  5. write things that are shared in your shared lib, things that are not shared in apps/ns-app or apps/web-app. Import shared stuff in the apps using import { SharedThings } from '@yourworkspace/shared';.

You can even mix stuff up. Let's say you're using sqlite for your application and IndexDB for your frontend.

@Injectable({providedIn: 'root'})
export class ItemService {
  constructor(private backend: StorageBackend) {}
  getItems() {
    return this.backend.getItems(); // do other stuff with the storage backend
  }
}
@Injectable()
export abstract class StorageBackend {
  abstract insert(item: Item): Promise<void>;
  abstract getItems(): Promise<Items[]>;
  abstract remove(item: Item): Promise<void>;
}
// web-app
@Injectable()
export class IndexDBBackend extends StorageBackend {
 // implement the abstract methods here
}
// ns-app
@Injectable()
export class SqliteBackend extends StorageBackend {
 // implement the abstract methods here
}
//web-app app.module.ts
@NgModule({
  ... // other module stuff
  providers: [provide: StorageBackend, useClass: IndexDBBackend]
})
//ns-app app.module.ts
@NgModule({
  ... // other module stuff
  providers: [provide: StorageBackend, useClass: SqliteBackend]
})

The possibilities are endless.