Magically drop a NativeScript app into your existing Angular web application and reuse all your code.*

You will be adding NativeScript views, but you already knew that.

• Supported projects that can use magic
• Watch video on how to integrate with Angular CLI

Install

npm i @wwwalkerrun/nativescript-ngx-magic --save

Usage

1. Use Component from @wwwalkerrun/nativescript-ngx-magic instead of @angular/core. Why?
2. Create NativeScript views ending with .tns.html (and/or styles ending with .tns.css) for each of your component's. How?
3. Run your truly native mobile app with NativeScript!

Example

A sample root component, app.component.ts:

import { Component } from '@wwwalkerrun/nativescript-ngx-magic';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

Then create a .tns.html NativeScript view template for this component, for example:

• app.component.tns.html:

<ActionBar title="Magic!" icon="" class="action-bar">
</ActionBar>
<StackLayout class="p-20">
    <Label text="NativeScript is Neat." class="h1 text-center"></Label>
</StackLayout>

Then if your component has styleUrls defined, you can create a .tns.css file, for example:

• app.component.tns.css:

// any custom css you want to use with your {N} view

Run for first time!

You will need to have fully completed steps 1 and 2 above.

Run your app in the iOS Simulator with:

npm run start.ios

Run your app in an Android emulator with:

npm run start.android

Welcome to the wonderfully magical world of NativeScript!

How to create NativeScript views

Based on our example above, assume app.component.html looks like this:

<main>
  <div>This is my root component</div>
</main>

You would then create a new file in app.component.tns.html like this:

<StackLayout>
  <Label text="This is my root component"></Label>
</StackLayout>

You can also use platform specific views if desired with the platformSpecific Component metadata:

import { Component } from '@wwwalkerrun/nativescript-ngx-magic';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  platformSpecific: true
})
export class AppComponent {}

Then you could create separate views for iOS and Android:

• app.component.ios.html
• app.component.android.html

You can learn more about NativeScript view options here.

You can also install helpful view snippets for VS Code here or Atom Editor here.

You can learn more here about how this setup works and why.

Supported Projects

• angular-cli
• angular-seed
• angular2-webpack-seed

Why different Component?

Component from nativescript-ngx-magic is identical to Component from @angular/core, except it automatically uses NativeScript views when your app runs in a NativeScript mobile app.

The library provides a custom Decorator under the hood. Feel free to check it out here and it uses a utility here.

You can see more elaborate use cases of this magic with angular-seed-advanced.

Special Note About AoT

Currently you cannot use custom component decorators with AoT compilation. This may change in the future but for now you can use this pattern for when you need to create AoT builds for the web:

import { Component } from '@angular/core';

// just comment this out and use Component from '@angular/core'
// import { Component } from '@wwwalkerrun/nativescript-ngx-magic';

@Component({
  // etc.

After doing the above, running AoT build will succeed. :)

The Component from nativescript-ngx-magic does the auto templateUrl switching to use {N} views when running in the {N} app therefore you don't need it when creating AoT builds for the web. However just note that when going back to run your {N} app, you should comment back in the Component from nativescript-ngx-magic. Again this temporary inconvenience may be unnecessary in the future.

Requirements

• Install NativeScript

License

MIT