nativescript/nativescript-angular

Integrating NativeScript with Angular

NativeScript Angular

This repository contains the code for integration of NativeScript with Angular.

NativeScript is a framework which enables developers to write truly native mobile applications for Android and iOS using JavaScript and CSS. Angular is one of the most popular open source JavaScript frameworks for application development. We worked closely with developers at Google to make Angular in NativeScript a reality. The result is a software architecture that allows you to build mobile apps using the same framework—and in some cases the same code—that you use to build Angular web apps, with the performance you’d expect from native code. Read more about building truly native mobile apps with NativeScript and Angular.

• NativeScript Angular
  • Watch the video explaining Angular and NativeScript
  • Explore the examples
  • Contribute
  • Known issues
  • Get Help

Watch the video explaining Angular and NativeScript

NativeScript session on AngularConnect conference

Explore the examples

The e2e apps are meant for testing stuff. You can take a look at these additional sample apps that use the published builds from npm:

• Hello world starter
• Master-detail template
• Drawer navigation template
• TabView navigation template
• NativeScript Angular SDK examples

Contribute

We love PRs! Check out the contributing guidelines and development workflow for local setup. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.

Known issues

1. There are certain issues with the Parse5DomAdapter and we'll likely need to provide our own later on:

• Self-closing elements (<Label text="Name" /><Button text="Save" />) get parsed wrong (in this case Button gets parsed as a Label child.

Get Help

Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.

nativescript-angular's Issues

TextField onChange support

Hi, Is there a way I can hook an event handler on TextField change with (onchange) handler?
From the docs it seems the only option is 'secure'.

10x!

Create a sample as part of the {N} samples

So that it can be seen live on the app store and play store.

Exception thrown in device when changin anything in app.css

From @markens on February 11, 2016 15:23

Hi everyone,

I started trying to run an existing app for styling purposes and when I run livesync --watch to a connected Android device, and I modified some properties inside app.css, then this exception is shown on the device's screen:
com.tns.NativeScriptException: Calling js method onCreateView failed platform cannot be initialized with different sets of providers. File: "/data/data/com.gft.appverse.showcase/files/app/tns_modules/angular2/src/core/application_ref.js, line: 78, column: 12 StackTrace: Frame: function:'platform', file:'/data/data/com.gft.appverse.showcase/files/app/tns_modules/angular2/src/core/application_ref.js', line: 78, column: 13 Frame: function:'bootstrap', file:'/data/data/com.gft.appverse.showcase/files/app/tns_modules/nativescript-angular/application.js', line: 51, column: 19 Frame: function:'onLoadedHandler', file:'/data/data/com.gft.appverse.showcase/files/app/tns_modules/nativescript-angular/application.js', line: 67, column: 17 Frame: function:'Observable.notify', file:'/data/data/com.gft.appverse.showcase/files/app/tns_modules/data/observable/observable.js', line: 155, column: 23 Frame: function:'Observable._emit', file:'/data/data/com.gft.appverse.showcase/files/app/tns_modules/data/observable/observable.js', line: 174, column: 18 Frame: function:'View.onLoaded', file:'/data/data/com.gft.appverse.showcase/files/app/tns_modules/ui/core/view-common.js', line: 590, column: 14 Frame: function:'View.onLoaded', file:'/data/data/com.gft.appverse.showcase/files/app/tns_modules/ui/core/view.js', line: 101, column: 35 Frame: function:'Page.onLoaded', file:'/data/data/com.gft.appverse.showcase/files/app/tns_modules/ui/page/page-common.js', line: 33, column: 35 Frame: function:'View._addViewCore', file:'/data/data/com.gft.appverse.showcase/files/app/tns_modules/ui/core/view-common.js', line: 913, column: 18 Frame: function:'View._addViewCore', file:'/data/data/com.gft.appverse.showcase/files/app/tns_modules/ui/core/view.js', line: 145, column: 39 Frame: function:'View._addView', file:'/data/data/com.gft.appverse.showcase/files/app/tns_modules/ui/core/view-common.js', line: 901, column: 14 Frame: function:'onFragmentShown', file:'/data/data/com.gft.appverse.showcase/files/app/tns_modules/ui/frame/frame.js', line: 89, column: 11 Frame: function:'android.app.Fragment.extend.onCreateView', file:'/data/data/com.gft.appverse.showcase/files/app/tns_modules/ui/frame/frame.js', line: 36, column: 17 at com.tns.Platform.callJSMethodNative(Native Method) at com.tns.Platform.dispatchCallJSMethodNative(Platform.java:799) at com.tns.Platform.callJSMethod(Platform.java:700) at com.tns.Platform.callJSMethod(Platform.java:680) at com.tns.Platform.callJSMethod(Platform.java:670) at com.tns.gen.android.app.Fragment_ftns_modules_ui_frame_frame_l21_c42__.onCreateView(android.app.Fragment.java) at android.app.Fragment.performCreateView(Fragment.java:2053) at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:894) at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1067) at android.app.BackStackRecord.run(BackStackRecord.java:834) at android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1452) at android.app.FragmentManagerImpl$1.run(FragmentManager.java:447) at android.os.Handler.handleCallback(Handler.java:739) at android.os.Handler.dispatchMessage(Handler.java:95) at android.os.Looper.loop(Looper.java:135) at android.app.ActivityThread.main(ActivityThread.java:5294) at java.lang.reflect.Method.invoke(Native Method) at java.lang.reflect.Method.invoke(Method.java:372) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:904) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:699)
It's only displayed on the device, nothing wrong happens in tns livesync process...
Then the only thing I can do is stop the app and relaunching it..

Any ideas?

Thanks ;)

Copied from original issue: NativeScript/NativeScript#1540

ng-conf May 4th - 6th 2016: pair on a proposal to present something amazing with ng2 + {N}

I'd like to submit a proposal to present something on ng2 + {N} and was curious if anyone wanted to pair with me on preparing something that pushes the boundaries?

https://www.ng-conf.org/#/cfp

I'm beginning to brainstorm some ideas and am willing to code the majority of what we decide to present if someone wanted to take a crack at submitting a joint proposal.

Time window to submit: Today - Feb. 14th.

No guarantees that we would get accepted but I'm willing to put forth a solid effort.

/cc @EddyVerbruggen @tjvantoll @hdeshev @vakrilov

Error when updating .css files when using livesync

When I use livesync and make a change to a .css (i.e. app.css) I get an error (see below).
When I edit a ts or html file, the error disappears and the css change is applied correctly.

I am using {N} 1.6.0
You can replicate the issue with: sample-groceries angular branch
project.

Executing before-prepare hook from /Users/witalec/NS/Workshop/sample-Groceries/hooks/before-prepare/nativescript-dev-typescript.js
Project successfully prepared
Transferring project files...
Successfully transferred all project files.
Applying changes...
Successfully synced application org.nativescript.groceries on device 192.168.57.101:5555.
JS: Page loaded
JS: BOOTSTRAPPING...
JS: ROOT
JS: CREATE VIEW ROOT: Page
JS: NativeScriptRenderer.createElement: StackLayout parent: Page(1), Page
JS: NativeScriptRenderer.createElement: page-router-outlet parent: StackLayout(25), StackLayout
JS: Creating view container in:StackLayout(25)
JS: EXCEPTION: Error during instantiation of Router! (PageRouterOutlet -> Router).
JS: ORIGINAL EXCEPTION: Route config should contain exactly one "as" or "name" property.
JS: ORIGINAL STACKTRACE:
JS: Error: Route config should contain exactly one "as" or "name" property.
JS:     at new BaseException (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/facade/exceptions.js:15:23)
JS:     at Object.normalizeRouteConfig (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_config_nomalizer.js:29:15)
JS:     at RouteRegistry.config (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_registry.js:66:43)
JS:     at /data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_registry.js:108:72
JS:     at Array.forEach (native)
JS:     at RouteRegistry.configFromComponent (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_registry.js:108:31)
JS:     at new RootRouter (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/router.js:423:23)
JS:     at routerFactory (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/router_providers_common.js:23:22)
JS:     at Injector._instantiate (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/core/di/injector.js:766:27)
JS:     at Injector._instantiateProvider (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/core/di/injector.js:714:25)
JS: ERROR CONTEXT:
JS: [object Object]
JS: ERROR BOOTSTRAPPING ANGULAR
JS: EXCEPTION: Error during instantiation of Router! (PageRouterOutlet -> Router).
JS: ORIGINAL EXCEPTION: Route config should contain exactly one "as" or "name" property.
JS: ORIGINAL STACKTRACE:
JS: Error: Route config should contain exactly one "as" or "name" property.
JS:     at new BaseException (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/facade/exceptions.js:15:23)
JS:     at Object.normalizeRouteConfig (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_config_nomalizer.js:29:15)
JS:     at RouteRegistry.config (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_registry.js:66:43)
JS:     at /data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_registry.js:108:72
JS:     at Array.forEach (native)
JS:     at RouteRegistry.configFromComponent (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_registry.js:108:31)
JS:     at new RootRouter (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/router.js:423:23)
JS:     at routerFactory (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/router_providers_common.js:23:22)
JS:     at Injector._instantiate (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/core/di/injector.js:766:27)
JS:     at Injector._instantiateProvider (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/core/di/injector.js:714:25)
JS: ERROR CONTEXT:
JS: [object Object]
JS: 
JS: undefined

Enable 2-way binding on Switch UI component

It would be great if we could have a 2 way binding on the checked property of a Switch
For example:
<Switch [(ngModel)]="hidePassword"></Switch>

Setup CI

.

Router and navigation

Figure out if we can integrate with the Angular Router.

If the above isn't possible/feasible, offer a similar API.

Json array result isn't mapped from $http using "tns-core-modules": "^1.6.0"

Should this be a new issue? I'm not sure how visible the closed issues are ... It is the same problem as the last one.

I can still see the result as a string, but the ".Json()" command is still an object that is not an array.

previous issue 41

response
            .map(response => response.json())
            .subscribe((items : Array<IProvider>) => {
                this.list = items; //<- items is a object ?

                // items.forEach((item) => {  
                //     this.logger.Notify("item");
                //     this.logger.Notify(item.Name);
                // });

                 this.logger.Notify("items available:" + items.length);
            },(error) => {
                this.logger.Error("Could not map items");
                this.logger.Error(error);
            });

Thanks, Matt

[email protected], UNMET PEER DEPENDENCY es6-shim@^0.33.3

├── [email protected] 
├── UNMET PEER DEPENDENCY es6-shim@^0.33.3
├─┬ [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ ├─┬ [email protected] 
│ │ ├─┬ [email protected] 
│ │ │ ├── [email protected] 
│ │ │ └── [email protected] 
│ │ └── [email protected] 
│ ├── [email protected] 
│ ├─┬ [email protected] 
│ │ ├── [email protected] 
│ │ └── [email protected] 
│ ├─┬ [email protected] 
│ │ ├─┬ [email protected] 
│ │ │ ├── [email protected] 
│ │ │ └── [email protected] 
│ │ ├── [email protected] 
│ │ └── [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ ├─┬ [email protected] 
│ │ ├─┬ [email protected] 
│ │ │ ├── [email protected] 
│ │ │ └── [email protected] 
│ │ └── [email protected] 
│ ├── [email protected] 
│ ├─┬ [email protected] 
│ │ ├── [email protected] 
│ │ └── [email protected] 
│ ├─┬ [email protected] 
│ │ └── [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ └── [email protected] 
├── [email protected] 
├─┬ [email protected] 
│ ├─┬ [email protected] 
│ │ ├── [email protected] 
│ │ ├── [email protected] 
│ │ ├─┬ [email protected] 
│ │ │ └── [email protected] 
│ │ ├── [email protected] 
│ │ └── [email protected] 
│ └── [email protected] 
├─┬ [email protected] 
│ ├── [email protected] 
│ └── [email protected] 
├─┬ [email protected] 
│ ├─┬ [email protected] 
│ │ └── [email protected] 
│ └─┬ [email protected] 
│   └── [email protected] 
├─┬ [email protected] 
│ └─┬ [email protected] 
│   ├── [email protected] 
│   ├─┬ [email protected] 
│   │ └── [email protected] 
│   ├── [email protected] 
│   └── [email protected] 
├─┬ [email protected] 
│ ├─┬ [email protected] 
│ │ ├─┬ [email protected] 
│ │ │ └─┬ [email protected] 
│ │ │   ├─┬ [email protected] 
│ │ │   │ └── [email protected] 
│ │ │   ├── [email protected] 
│ │ │   ├─┬ [email protected] 
│ │ │   │ ├─┬ [email protected] 
│ │ │   │ │ └─┬ [email protected] 
│ │ │   │ │   ├── [email protected] 
│ │ │   │ │   ├── [email protected] 
│ │ │   │ │   ├── [email protected] 
│ │ │   │ │   └── [email protected] 
│ │ │   │ ├── [email protected] 
│ │ │   │ └── [email protected] 
│ │ │   ├── [email protected] 
│ │ │   ├── [email protected] 
│ │ │   ├── [email protected] 
│ │ │   ├── [email protected] 
│ │ │   ├── [email protected] 
│ │ │   ├─┬ [email protected] 
│ │ │   │ └── [email protected] 
│ │ │   ├── [email protected] 
│ │ │   ├─┬ [email protected] 
│ │ │   │ ├─┬ [email protected] 
│ │ │   │ │ └── [email protected] 
│ │ │   │ └── [email protected] 
│ │ │   ├─┬ [email protected] 
│ │ │   │ ├─┬ [email protected] 
│ │ │   │ │ ├── [email protected] 
│ │ │   │ │ └── [email protected] 
│ │ │   │ ├── [email protected] 
│ │ │   │ └── [email protected] 
│ │ │   └─┬ [email protected] 
│ │ │     ├── [email protected] 
│ │ │     └── [email protected] 
│ │ ├── [email protected] 
│ │ ├── [email protected] 
│ │ ├─┬ [email protected] 
│ │ │ └── [email protected] 
│ │ ├─┬ [email protected] 
│ │ │ └── [email protected] 
│ │ ├─┬ [email protected] 
│ │ │ └── [email protected] 
│ │ ├── [email protected] 
│ │ ├── [email protected] 
│ │ └─┬ [email protected] 
│ │   ├── [email protected] 
│ │   └─┬ [email protected] 
│ │     ├── [email protected] 
│ │     ├── [email protected] 
│ │     └── [email protected] 
│ ├─┬ [email protected] 
│ │ ├── [email protected] 
│ │ ├── [email protected] 
│ │ ├── [email protected] 
│ │ └─┬ [email protected] 
│ │   ├── [email protected] 
│ │   └─┬ [email protected] 
│ │     └── [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ ├─┬ [email protected] 
│ │ └── [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ └── [email protected] 
├── [email protected] 
├── [email protected] 
├── [email protected] 
├── [email protected] 
├── [email protected] 
├── [email protected] 
├─┬ [email protected] 
│ └── [email protected] 
├── [email protected] 
├── [email protected] 
└─┬ [email protected] 
  └── [email protected] 

npm WARN [email protected] requires a peer of es6-shim@^0.33.3 but none was installed.

Causes npm install to fail.

PR coming with fix...

Clean up the code

• Review code from Angular side
• Add unit tests
• make it production ready

Allow templateUrl files to be XML files

A few of us were confused that templateUrl files have to be .html files. I get why it works like it does today, but the current setup is hard for us to explain—especially since we tell people we don’t use HTML/DOM/browsers. The .html files also screw up tooling, because some editors start suggesting elements like <div>.

I’m not sure this is possible, but could we change the integration so that the templateUrl property alternatively lets you point at files with a .xml extension? Currently if I try to do that I get some bizarre TypeScript error. (Cannot read property 'localNSMap' of undefined)

Thanks.

Create the famous TodoMVC app in NativeScript

http://todomvc.com/examples/angularjs/#/

Support 2-way data binding (aka ng-model)

One of the first things I wanted to do in my {N} + Angular 2 app was add a simple form, but I found it difficult since <TextField [text]="foo"> only uses one-way data binding, and <TextField [(ngModel)]="foo"> doesn’t work.

Can we some up with some way to incorporate Angular 2’s two-way data binding, ideally with the same [(ngModel)] syntax?

Thanks.

Package everything into a {N} plugin

and publish it on http://npmjs.org for easier consumption.

Create Performance Tests

Measure the following:

1. App size
2. Custom animations and FPS
3. App Loading time
4. Memory footprint
5. Load test with 5k components on a single page

shell:depNSInit - Task "default" not found.

When getting the project setup and you get to the grunt prepare step, it runs a series of tasks where this happens...

Running "shell:depNSInit" (shell) task

node-gyp rebuild

SOLINK_MODULE(target) Release/.node
CXX(target) Release/obj.target/fse/fsevents.o
SOLINK_MODULE(target) Release/fse.node
[email protected] ../../node_modules/grunt-ts
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected]
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
src/
Warning: Task "default" not found. Use --force to continue.

Aborted due to warnings.
Warning: Command failed: /bin/sh -c npm install&&grunt --no-runtslint
Use --force to continue.

Aborted due to warnings.

Bundle Angular (and maybe NativeScript) JS files

The app cold start time is pretty high. Hopefully bundling script files and avoiding a bunch of file system calls at startup will make it faster.

Multiple bootstraps problem

The hello world template sometimes does several bootstraps, probably as a result of some internal error. I've seen it in other apps, sometimes showing a stacktrace, then retrying and succeeding.

Using Http and .json() - unexpected result.

I've taken a look at the previous issue taking me to here
, but seems unrelated.

Im expecting an Array from .json() but I cant iterate over it, or get the length.

Testing in Android...
My current code

The call is correct.
.Text() has the expected outcome.
.JSON() appears to work - but i cant get any data from it.
Expected: Array (well Array)

Its working correctly in a ionic2 application link.

Here is the Logging for that view:

I've included your json passed log line. Any thoughts?

best regards,
Matt

Example usage of SegmentedBar? Having trouble with the component rendering improperly with bound `items` property

I'm having trouble getting a Segmented Bar to render properly when bound to a property in an angular component class.

<SegmentedBar items="{{supportedLanguages}}"></SegmentedBar>

...
export class LangSwitcherCmp {
  public supportedLanguages: Array<any> = [
    { code: 'en', title: 'English' },
    { code: 'es', title: 'Spanish' },
    { code: 'fr', title: 'French' },
    { code: 'ru', title: 'Russian' },
    { code: 'bg', title: 'Bulgarian' }
  ];
}

It ends up rendering like this... (am I missing something?):

Make it user ready

solve packaging issue for Angular (e.g. .d.ts files are missing)

Using Http with map to get json response doesn't seem to work

Trying to use http module from angular2 in nativescript, but I am getting this error:

file:///app/tns_modules/angular2/src/platform/serv
er/parse5_adapter.js:55:75: EXCEPTION: TypeError: _this.http.request(address, options)
                            .map is not a function. (In '_this.http.request(address, options)

This is working in the browser and also including in both places the rxjs map module

import 'rxjs/add/operator/map';

If I remove this from the browser I am getting the same message. But with nativescript even if I add it, it doesnt work...

What can be wrong here? Is there any working example using the http module?

Posted here, but so far no ideas, so adding it here as well

http://stackoverflow.com/questions/34899835/using-map-in-nativescript-with-angular2

Allow router outlet usage as the root of the visual tree

The current renderer implementation has a limitation that prevents placing router-outlet components as Page content children. The workaround at the moment is to surround them with a layout tag.

This one will probably require changes to the ProxyViewContainer implementation.

Support styles and stylesUrl

Because you cannot use NativeScript’s “page-specific” CSS approach with Angular 2, I’ve been trying to come up with some way to scope styling to individual components. If we could find some way to support Angular’s styles and stylesUrl that would be great.

files list in tsconfig.json

The hello world Angular 2 template contains a hardcoded list of every TypeScript file in the app in its tsconfig.json. This is becoming a real maintenance nightmare as my apps get bigger, but that list of files seems to be necessary, because if I remove "files" from tsconfig.json I get all sorts of TypeScript errors.

Is there any way we can remove the need to hardcode a list of all your TypeScript files? cc @jlooper

Including plugin UI elements like the nativescript-cardview - help ?

nativescript-cardview
I imagine the card-view will be a common plugin that will be imported and used (as well as much of the material plugins). Could a quick POC be made?
Or a code example that shows the inclusion of a native element from a plugin.

I presume plugins need to be registered with angular rather just adding in directives/components?

I've been scrolling through the src ... but adding in different elements from plugins (non-angular kind) isn't so obvious to me... or I can't find any previous examples?

Looking at the element-registry this might be what I'm after... the right track?
element-registry

What is the best/easiest way of going around this?

Thanks,
Matt

Update renderer to use latest api changes from beta.1

I was starting to look at updating renderer.ts to the latest api changes with beta.1, which the entire interface changed. If someone else is already working on updating that, please let me know as not to duplicate efforts ;)

Changes:
https://github.com/angular/angular/blob/master/modules/angular2/src/core/render/api.ts

Current errors with latest:

/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(2,9): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderComponentTemplate'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(6,5): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderEventDispatcher'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(7,5): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderElementRef'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(8,5): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderProtoViewRef'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(9,5): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderViewRef'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(10,5): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderFragmentRef'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(11,5): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderViewWithFragments'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(12,5): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderTemplateCmd'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(26,14): error TS2415: Class 'NativeScriptRenderer' incorrectly extends base class 'Renderer'.
  Types of property 'createElement' are incompatible.
    Type '(name: string, attrNameAndValues: string[]) => ViewNode' is not assignable to type '(parentElement: any, name: string) => any'.
      Types of parameters 'attrNameAndValues' and 'name' are incompatible.
        Type 'string[]' is not assignable to type 'string'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(26,14): error TS2515: Non-abstract class 'NativeScriptRenderer' does not implement inherited abstract member 'attachViewAfter' from class 'Renderer'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(26,14): error TS2515: Non-abstract class 'NativeScriptRenderer' does not implement inherited abstract member 'createViewRoot' from class 'Renderer'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(26,14): error TS2515: Non-abstract class 'NativeScriptRenderer' does not implement inherited abstract member 'detachView' from class 'Renderer'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(26,14): error TS2515: Non-abstract class 'NativeScriptRenderer' does not implement inherited abstract member 'listen' from class 'Renderer'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(26,14): error TS2515: Non-abstract class 'NativeScriptRenderer' does not implement inherited abstract member 'listenGlobal' from class 'Renderer'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(26,14): error TS2515: Non-abstract class 'NativeScriptRenderer' does not implement inherited abstract member 'projectNodes' from class 'Renderer'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(26,14): error TS2515: Non-abstract class 'NativeScriptRenderer' does not implement inherited abstract member 'renderComponent' from class 'Renderer'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/app/nativescript-angular/renderer.ts(26,14): error TS2515: Non-abstract class 'NativeScriptRenderer' does not implement inherited abstract member 'selectRootElement' from class 'Renderer'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/view.d.ts(1,10): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderComponentTemplate'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/view.d.ts(1,35): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderViewRef'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/view.d.ts(1,50): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderEventDispatcher'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/view.d.ts(1,73): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderTemplateCmd'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/view.d.ts(1,92): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderProtoViewRef'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/view.d.ts(1,112): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderFragmentRef'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/view_factory.d.ts(1,10): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderTemplateCmd'.
/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/view_factory.d.ts(1,29): error TS2305: Module '"/Users/nathanbackup/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/node_modules/angular2/src/core/render/api"' has no exported member 'RenderComponentTemplate'.

TypeScript compilation issues

Hey @hdeshev,

I’m going through the installation instructions, but the TypeScript compilation seems to be failing. Specifically when I run grunt ng-sample I get the following error:

Running "ts:build" (ts) task
Compiling...
Using the custom compiler : node_modules/typescript/bin/tsc
/Users/tj/dev/nativescript/nativescript-angular/ng-sample/src/angular2/typings/zone/zone.d.ts(1,1): error TS6053: File '/Users/tj/dev/nativescript/nativescript-angular/ng-sample/src/angular2/typings/es6-shim/es6-shim.d.ts' not found.

Any idea what’s up here?

Thanks.

advanced seed for community in progress - request for assistance

I am working on a relatively advanced angular2-seed which will feature {N} integration:
https://github.com/NathanWalker/angular2-seed-advanced

I'm running into an issue. Curious if someone could be so kind to take a look by following the instructions here to get setup and trying to help:
https://github.com/NathanWalker/angular2-seed-advanced/blob/development/NATIVESCRIPT_SUPPORT.md

Array.create is not a function (animation)

Tested on Android.

This appeared to have worked week in my project, but not anymore (quite a few updates everywhere, so not certain when it broke)...

... and I've reproduced it in the hello world sample app (added a button to create an animation)

repo

source file

Thanks,
Matt

Configure Page properties with nativeScriptBootstrap

Think of a way to configure the Page with the new style nativeScriptBootstrap that initializes everything. Several options on the table:

• Expose a way to pass a loaded callback for the page.
• Pass a Page DI provider to nativeScriptBootstrap
• Configure Page properties with components/directives in HTML.

Lower-case-dashed Component Declaration does not work in angular2 component template

The angular2 component below uses lower-case-dashed nativescript components and does not render properly (renders only button 3 centered on the page).
The capital case declarations work fine.

@component({
selector: 'testing',
template: <stack-layout> <button text="button 1"></button> <button text="button 2"></button> <button text="button 3"></button> </stack-layout>
})

Support for external templates

@View(templateUrl=’somefile.xml’).

Scaffold/Seed project

Should have a seed/scaffold project for developers to be able to start developing immediately.

Angular 2 support

When angular 2 release nativescript will be ready with that ?

Build in Visual Studio 2015 with cordova tools.

Hi, nice work, i've been trying to achieve the same using Visual Studio 2015 RC.

I have forked your project, I will do some digging in order to have a vs build.

If its comes usefull, i would like to contribute.

Cheers, mate

Animations

Support animations in the renderer and see how stuff like ngAnimate 2.0 fits in the big picture.

Instantiate Angular templates in {N} templated controls

NativeScript templated controls have their own visual tree and template life cycle that we need to integrate with Angular. We want to instantiate Angular templates (with bindings and everything) and attach them to the correct visual tree location.

We can't use a plain NgFor for this task since those controls usually pull instantiated templates when the need to display a new item arises.

Todo app

Create a simple version of a todo app:

• input field
• "add" button
• list of todos
• click on todos to remove them

Dev workflow - there is no 'grunt app'

I've been able to get stuff to work, but not following the dev workflow in the readme.
There is no grunt app... task not found.

I wanted to verify this is indeed the case, and if so, I'll add a PR to remove that from the dev workflow or if there are new recommended dev workflow steps, if someone could please update the readme.
:)

Think of possible integration between Angular Forms and our DataForm

Angular Forms - http://angularjs.blogspot.com/2015/03/forms-in-angular-2.html
Telerik DataForm - http://www.telerik.com/ios-ui/dataform (coming soon in NativeScript)

How to register custom element?

Let's say I have a custom nativescript element created by inheriting Label. How can I use this element in nativescript-angular? Is there a way to register such element as angular directive??

Using ListViews is hard

I built Groceries as an ng2 web app (see https://github.com/tjvantoll/Groceries), and I’m trying to port as much of that code as possible to the Groceries {N} app.

One thing that struck me is just how much harder it is to build a list in {N}. For Groceries web I was able to trivially bind a <ul> to an array of objects. In {N} trying to accomplish the same task is considerably harder. Here’s a short list of things I’ve found that I have to do. (The full code is in this .html file and this .ts file.)

1. Use <item-template> and <template> instead of ngFor. I realize this is due to the difference in how our ListView works, but I thought it was still work explicitly mentioning.
2. Use the async pipe in my template.
3. Set the component’s changeDetection to ChangeDetectionStrategy.OnPush.
4. Bind to an rxjs/Observable instead of just a simple array.
5. Wrap the array in a WrappedValue so that {N} recognizes pushes to the array.

Really all I want to do is bind the <ListView> to a simple array like I can do in ng2 web apps, so if at all possible I’d love to see 2–5 above go away. <ListView>s are really common and I don’t think I’ll be the first person to be confused by these requirements. Removing them would also allow for more code reuse between {N} and web apps.

Running ng-sample - fails with "Cannot read property 'version' of undefined" ?

I'd like to contribute more on this project but want to make sure I can run everything properly.
After following README verbatim, preparing everything, and then try to run the sample with:

env WEBPACK_BUILD=1 tns emulate ios --timeout 500 --device "com.apple.CoreSimulator.SimDeviceType.iPhone 6"

I get this:

Executing before-prepare hook from /Users/nathan/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/hooks/before-prepare/10-copy-renderer.js
Executing before-prepare hook from /Users/nathan/Documents/github_projects/nativescript-stuff/nativescript-angular/ng-sample/hooks/before-prepare/20-nativescript-dev-typescript.js
Found peer TypeScript 1.7.5
Cannot read property 'version' of undefined
# emulate ios
┌─────────┬───────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Usage   │ Synopsis                                                                                                      │
│ General │ $ tns emulate ios [--path <Directory>] [--device <Device Name>] [--available-devices] [--release] [--timeout] │
└─────────┴───────────────────────────────────────────────────────────────────────────────────────────────────────────────┘

Builds the specified project and runs it in the native iOS Simulator.

### Options

    * --available-devices - Lists all available device type identifiers for the current Xcode.
    * --release - If set, produces a release build. Otherwise, produces a debug build.
    * --path - Specifies the directory that contains the project. If not specified, the project is searched for in the current directory and all directories above it.
    * --device - Specifies the name of the iOS Simulator device on which you want to run your app. To list the available iOS Simulator devices, run $ tns emulate ios --available-devices
    * --timeout - Sets the number of seconds that the NativeScript CLI will wait for the iOS Simulator to start before quitting the operation and releasing the console. The value must be a positive integer. If not set, the default timeout is 90 seconds. 

### Attributes

    * <Device Name> is the name of the iOS Simulator device on which you want to run your app as listed by $ tns emulate ios --available-devices 

Allow for ActionBar usage

Currently using an ActionBar in a {N}/ng2 app is a bit clunky (see https://github.com/NativeScript/sample-Groceries/blob/5b09135256c24ec4e8ba17b3dc76eff5de7db6cc/app/views/login/login.ts#L17-L19).

Ideally we’d have some way you could provide the necessary ActionBar XML elements in your Angular components. I’m not sure how we could make that possible, but I thought I’d open things up for discussion because I think this is going to be a common pain point.

Clarification on `app.ts` vs. `main-page.ts` for bootstrap

Recent changes were pushed in today that are confusing. There's now 2 files the deal with bootstrap. app.ts and main-page.ts... It appears app.ts is taking precedence... as the ListTestAsync component is now launching (on current master) as opposed to whatever change I make in main-page to try out different examples. So is the intent for app.ts to take place of main-page.ts as far as bootstrapping goes? :/

nested listview

There seems to be problem when nesting list views. Once first nested list view is processed, all other list items at parent level are also treated as nested.

Profile and optimize tree insertion

We can probably do better at inserting visual elements. The goal is to see if we can get somewhat closer to the browser performance.

ObservableArray/ListView support

I would like to use a <ListView> in my {N}/Angular 2 app, and currently it doesn’t appear that is supported.

To start if I try to point *ngFor at an ObservableArray I get an error about Cannot find a differ supporting object '' (although it does work if I point at an ObservableArray’s _array property).

But even if that worked I’m not sure how I’d incorporate the *ngFor syntax into the existing <ListView> element. Am I missing something here, or is this just not supported yet?

Thanks.