How do I integrate nativescript-angular with Angular CLI?

[jamesbrewerdev]

I've created a new project using Angular CLI and I'd like to use NativeScript to build a mobile app as part of this project. I'd like to share my pipes, services, etc between web and native, so having everything in the same repository makes sense.

How do I integrate nativescript-angular with Angular CLI?

[NathanWalker]

They say things are all about timing, and you have asked at the right moment. I'm in process of building support for Angular CLI to: https://www.npmjs.com/package/nativescript-ng2-magic

I"ll post back when the support is available. It will give you the fastest and most seamless dev workflow in doing exactly that.

[jamesbrewerdev]

@NathanWalker You're my hero! Working on a demo for our front end team to show them why Angular 2 is awesome and the way to go -- this will help loads!

[NathanWalker]

Ok @BRWR, it's ready now. Do this from the root of the project you created with angular-cli:

npm i nativescript-ng2-magic

When install completes, open nativescript/app/main.ts, and modify as follows:
Anywhere [Your Project Name] is should be your project name :)

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import {nativeScriptBootstrap} from "nativescript-angular/application";
import {NS_ROUTER_PROVIDERS, NS_ROUTER_DIRECTIVES} from "nativescript-angular/router";
import {MagicService} from "nativescript-ng2-magic";
MagicService.ROUTER_DIRECTIVES = NS_ROUTER_DIRECTIVES;

// import your root component here
import {[Your Project Name]AppComponent} from "./app/[your project name].component";

nativeScriptBootstrap([Your Project Name]AppComponent, [NS_ROUTER_PROVIDERS], { startPageActionBarHidden: false });

Then open src/app/[your project name].component.ts and modify as follows:

import { Component } from 'nativescript-ng2-magic';  <-- note the import change: `Component` from magic lib

@Component({  // note we remove `module.id`
  selector: '[your project name]-app',
  templateUrl: './app/[your project name].component.html',  // note we use absolute urls
  styleUrls: ['./app/[your project name].component.css']  // note we use absolute urls
})
export class [your project name]AppComponent {
  title = '[your project name] works!';
}

You are now set to create {N} views and share all your code. 👍

For example, you could create src/app/[your project name].component.tns.html as follows:

<ActionBar title="Angular CLI NativeScript Magic" icon="">
</ActionBar>
<StackLayout>
    <Label [text]="title" textWrap="true"></Label>
</StackLayout>

You can make changes in src/app or nativescript/app/app; The {N} app contains a symbolic link to your web src so changes you make in either are mirrored because they are the same directory :)

Now you can run any combination of these commands (which the magic lib auto-added to your package.json):

npm run start.ios  // iOS Simulator
npm run start.livesync.ios  // iOS Simulator but with live syncing so you can change code live
npm run start.android  // Android Emulator (if you have an AVD Image setup - see {N} docs)
npm run start.livesync.android  // Android Emulator with live syncing

Install these snippets to make creating {N} views as simple as possible:
VS Code: https://marketplace.visualstudio.com/items?itemName=wwwalkerrun.nativescript-ng2-snippets
Atom: https://atom.io/packages/nativescript-ng2-atom-snippets

Welcome to the Magical World of NativeScript!

As with any 3rd party lib, you will need to modify some other things to get it working with the web as noted here: https://github.com/angular/angular-cli/wiki/3rd-party-libs

For example, you will need to modify angular-cli-build.js as follows:

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/*.js',
      'es6-shim/es6-shim.js',
      'reflect-metadata/*.js',
      'rxjs/**/*.js',
      '@angular/**/*.js',
      'nativescript-ng2-magic/**/*.js'
    ]
  });
};

Then modify src/system-config.ts with something as follows (in-part); may not be correct but to get you the gist:

const map: any = {
  'nativescript-ng2-magic': 'vendor/nativescript-ng2-magic/nativescript-ng2-magic.js',
  'nativescript-ng2-magic/*': 'vendor/nativescript-ng2-magic/**/*.js'
};

[jamesbrewerdev]

Awesome @NathanWalker! Thanks!

I'm new to NatuveScript, so I have a question. Feel free to correct me if anything I say is wrong. It looks like this uses the same components for both Android and iOS. Are there cases where that wouldn't be desirable? Does NativeScript support components on Android but not on iOS or vice-versa?

[NathanWalker]

Yes they use the same for both iOS and Android.

Where the platforms are very different, custom components come into play and a growing list of plugins achieve much of what you may encounter:
http://nativescript.rocks/new.php
and see this:
http://plugins.telerik.com/nativescript

Also, you can snack on delicious treats here:
http://www.nativescriptsnacks.com/

[jamesbrewerdev]

@NathanWalker Do you have a sample project with nativescript-ng2-magic? I keep getting an error about not being able to find decorators/magic.component and services/magic.service. I've tried updating packages and map in system-config.ts, but haven't had any luck.

[rijine]

@NathanWalker thank you.

[NathanWalker]

This can be closed for whoever has the rights to close it 👍

[chrillewoodz]

@NathanWalker Are you still developing the magic module? I looked at it and it hasn't been updated in a long time. I'm looking for a solution for having the same code base for app and web, so that plugin would seem like a great fit if it's still up to date with the latest angular.