Awesome
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
- The video is slightly outdated with latest published version but still very applicable.
Install
npm i @wwwalkerrun/nativescript-ngx-magic --save
Usage
- Use
Component
from@wwwalkerrun/nativescript-ngx-magic
instead of@angular/core
. Why? - Create NativeScript views ending with
.tns.html
(and/or styles ending with.tns.css
) for each of your component's. How? - Ensure your components are declared and routes (if any) are defined in
nativescript/app/app.module.ts
. NativeScript's rootAppModule
is defined seperately to allow you to hook into and/or load distinct native modules if needed. - 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:
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, 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({
moduleId: module.id,
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
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.