How do I integrate nativescript-angular with Angular CLI? #225

Activity

1. NathanWalker commented on May 9, 2016

   

   NathanWalker

   on May 9, 2016

   Contributor

   More actions

   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.

   🎉React with 🎉5Reacted by James Brewer, Hristo Deshev, Roberto Fernandez Diaz, Fernando Miranda and Vahid Najafi
2. jamesbrewerdev commented on May 10, 2016

   

   jamesbrewerdev

   on May 10, 2016

   Author

   More actions

   @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!

   👍React with 👍3Reacted by Nathan Walker, Hristo Deshev and Davíð Már Gunnarsson
3. NathanWalker commented on May 10, 2016

   

   NathanWalker

   on May 10, 2016

   Last edited by NathanWalker

   Contributor

   More actions

   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'
   };
   
4. jamesbrewerdev commented on May 10, 2016

   

   jamesbrewerdev

   on May 10, 2016

   Author

   More actions

   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?
5. NathanWalker commented on May 10, 2016

   

   NathanWalker

   on May 10, 2016

   Contributor

   More actions

   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/
6. jamesbrewerdev commented on May 10, 2016

   

   jamesbrewerdev

   on May 10, 2016

   Author

   More actions

   @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.
7. rijine commented on Jun 22, 2016

   

   rijine

   on Jun 22, 2016

   More actions

   @NathanWalker thank you.
8. NathanWalker commented on Jun 23, 2016

   

   NathanWalker

   on Jun 23, 2016

   Contributor

   More actions

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

   closed this as completedon Jun 23, 2016
10. chrillewoodz commented on Jul 17, 2017

    

    chrillewoodz

    on Jul 17, 2017

    More actions

    @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.

    👍React with 👍5Reacted by Denkan, matodrobec, Aleksandar Djindjic, Nathan Mc Grath and Vadim