2

In the official documentation, there are only examples of how to migrate Web app into NativeScript but I want to migrate existing NativeScript into a Web app.

I can not find a solution anywhere on the internet. Is it even possible to do it in the opposite way or only from WEB to NativeScript?

I tried to do the same process inside my NativeScript project but I'm not able to use any of @angular/cli commands.

Igor Janković
  • 5,494
  • 6
  • 32
  • 46

1 Answers1

-1

I have done the same for one of my previous mobile only {NS} project. Initially it was not a smoth ride but once you are settled, it is very time-saving to use same code base for both Web and mobile. Here are the steps I would suggest based on my experience.

  1. You should be using @angular/cli@6.1.0 or newer. npm i -g @angular/cli
  2. Installl nativescript-schematics. npm i -g @nativescript/schematics
  3. Create a new Project. ng new --collection=@nativescript/schematics my-mobile-app (I did it in this way and then copied over src/app folder here from Mobile app).
  4. Copy the app/src folder from existing project. (You may want to look for source folder in nsconfig.json "appPath": "app")
  5. Find the .ts file where you are using mobile specific components and create a wrapper class for the same. E.g. I was using Fancy Alerts for mobile apps, so I created a wrapper helper class like helper.tns.ts and helper.ts

in helper.ts

public show() {
    alert('Javascript+HTML alert')  .
  }

in helper.tns.ts

public show() {
    TNSFancyAlert.showWarning('Warning!', 'Message', `Ok`, 0, 300).then(() => {
         resolve('Success');
    });  
  }
  1. Rename all .html to .tns.html and create web specific html files.

Build a web app

ng serve

Build a Mobile app

tns run android --bundle
tns run ios --bundle

P.S. --bundle is the key here to compile mobile specific files only. The HTML code that defines the View of the component should be different between a web and a mobile app.

Narendra
  • 4,514
  • 2
  • 21
  • 38