Home

Awesome

Angular 2 Style Guide MIT license

nativescript-ngx-magic

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.

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. Ensure your components are declared and routes (if any) are defined in nativescript/app/app.module.ts. NativeScript's root AppModule is defined seperately to allow you to hook into and/or load distinct native modules if needed.
  4. Run your truly native mobile app with NativeScript!

Example

A sample root component, app.component.ts:

BEFORE:

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

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

AFTER:

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

@Component({
  // notice! - Important to resolve path to templateUrl and/or styleUrls correctly
  moduleId: module.id,
  selector: 'app',
  templateUrl: 'app.component.html', // notice! - removed leading './'
  styleUrls: ['app.component.css'] // notice! - removed leading './'
})
export class AppComponent {}

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

<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, create a .tns.css file, for example:

// 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({
  moduleId: module.id,
  selector: 'app',
  templateUrl: 'app.component.html',
  platformSpecific: true
})
export class AppComponent {}

Then you could create separate views for iOS and Android:

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

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

License

MIT