How can I migrate a web app with Angular v7 to mobile NativeScript app

Question

I made a simple web app with Angular v7 and I want to migrate it to a NativeScript mobile app .

I followed the instructions in https://docs.nativescript.org/angular/code-sharing/migrating-a-web-project#migrating-components but I am facing a difficulty.

The app is running in my Android mobile phone but it does not show the content because I need to adjust it properly for a mobile app. It shows auto-generated works. The problem is I do not know how I can do adjust properly the code since I cannot find a properly doc. Any help?

My code in app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<weather-search></weather-search>
<weather-list></weather-list>

<router-outlet></router-outlet>

My code in weather-search.component.html:

<section class="weather-search">
    <form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <div class="test_up">
            <label for="city" class="city">City</label>
            <input name="location" type="text" id="city" ngModel required>
        </div>
        <div class="test_down">
            <label for="countryCode" class="city">Country Code</label>
            <input name="countryCode" type="text" id="code" ngModel required>
        </div>
        <button type="submit">Add City</button>
    </form>
    <button (click)="onClickLocationData(f)">Get geolocation</button>
    <label for="latitude" class="map" *ngIf="latitude!=0">Latitude: {{latitude}} </label>
    <label for="longitude" class="map" *ngIf="longitude!=0">Longitude: {{longitude}} </label>
    <div id="map" class="mapLocation"></div>
</section>

My code in weather-list.component.html:

<section class="weather-list">
    <weather-item *ngFor="let weatherItem of weatherItems" [item]="weatherItem"></weather-item>
</section>

My code in weather-item.component.html:

<article class="weather-element">
    <div class="col-1"> 
        <h3>{{ weatherItem.cityName }}</h3>
        <p class="info">{{ weatherItem.description }}</p>
    </div>
    <div class="col-2"> 
        <span class="temperature">{{ weatherItem.temperature }}°C</span>
    </div>
</article>

The problem is I do not know how I can do adjust properly the code => How can I help you with, let me know? I recently worked on few {NS} code sharing projects. — Narendra
– Narendra, Commented May 20, 2019 at 10:06
@Narendra Hi! Thanks for the quick response. After running successfully the commands ng add @nativescript/schematics and **ng g migrate-component --name= ** for each component, if I run it on my mobile device, it works but it does not show the appropriate content. Now shouldn 't I adjust the content of each file that I posted? How? Can you give an example using my code? — Kathrine Hanson
– Kathrine Hanson, Commented May 20, 2019 at 10:10
@Narendra Hi! Can you also show me how I will adjust my form in weather-search.component.html ? — Kathrine Hanson
– Kathrine Hanson, Commented May 20, 2019 at 11:49

Narendra · Accepted Answer · 2019-05-20 10:13:17Z

1

As that document suggests as well, you have to create component.tns.html file as and other HTML elements are not available for mobile.

In your .tns.html file, you can replace with either StackLayout or GridLayout. You can refer to https://www.nslayouts.com/ to learn more about {NS} layouts.

in your weather-list.component.tns.html:

<StackLayout class="weather-list">
    <weather-item *ngFor="let weatherItem of weatherItems" [item]="weatherItem"></weather-item>
</StackLayout >

and in weather-item.component.tns.html

<StackLayout class="weather-element">
        <StackLayout>
            <Label text="{{ weatherItem.cityName }}"></Label>
            <Label text="{{ weatherItem.description }}"></Label>
        </StackLayout>
        <StackLayout>
            <Label text="{{ weatherItem.temperature }}"></Label>
        </StackLayout>
    </StackLayout>

edited May 20, 2019 at 10:13

answered May 20, 2019 at 10:10

Narendra

4,5842 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kathrine Hanson Over a year ago

What about self-made components like <weather-item> in weather-list.component.html ? Can you give me an example? Thanks!!

Narendra Over a year ago

I have added an example for you in answer. You can also create sample here at play.nativescript.org

Kathrine Hanson Over a year ago

Thank you so much! If you have any other sources for migration, it would be nice if you can share!!

Narendra Over a year ago

Sure, I'll upload a git hub sample and will share soon!!

Kathrine Hanson Over a year ago

Can you create a chat room so that I can share my problem? I adjust all the code as you showed me but it shows again Auto-generated works!

|

Collectives™ on Stack Overflow

How can I migrate a web app with Angular v7 to mobile NativeScript app

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related