Angular2 + NativeScript TodoMVC example
License: Apache License 2.0
This sample application is no longer maintained.
Please check nativescript-sdk-examples-ng repo which contains a much more extensive set of examples of NativeScript with Angular.
Steps to reproduce:
Result: when you try to focus the text field in order to change its text, it gets back to label.
Hello,
I've been looking around for a good integration of Angular2 and Nativescript and this seems to be the best one around so far. Once set up, I tried running the command tns livesync ios --emulator --watch so I could start messing with it. The problem is, each little change I make to the code takes up to like 15-17 seconds to be applied on the emulator. Any idea why? Livesync has worked perfectly before with normal nativescript projects. I know that the typescript compiler needs to run and compile everything down to js but it shouldn't take this long imo. Can anyone help me with that?
I excuted the following command
git clone https://github.com/NativeScript/sample-ng-todomvc
cd sample-ng-todomvc
tns run android
Then the following errors appeared, I tried to remove node_modules,hooks,platforms directory and rerun, but the same problem.
D:\code\nativescript\sample-ng-todomvc>tns run android
> [email protected] postinstall D:\code\nativescript\sample-ng-todomvc\node_modules\nativescript-angular
> node postinstall.js
> [email protected] postinstall D:\code\nativescript\sample-ng-todomvc\node_modules\nativescript-dev-typescript > node postinstall.js Project already targets TypeScript ~2.2.1
[email protected] D:\code\nativescript\sample-ng-todomvc +-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[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] license should be a valid SPDX license expression
Copying template files...
Installing tns-android
[email protected] D:\code\nativescript\sample-ng-todomvc
`-- [email protected]
| Installing tns-android
Project successfully created.
Executing before-prepare hook from D:\code\nativescript\sample-ng-todomvc\hooks\before-prepare\nativescript-dev-typescript.js
Found peer TypeScript 2.2.2
node_modules/tns-core-modules/declarations.d.ts(3,15): error TS2300: Duplicate identifier 'Request'.
node_modules/tns-core-modules/declarations.d.ts(17,5): error TS2403: Subsequent variable declarations must have the same type. Variable 'headers' must be of type 'any', but here has type 'string[] | Headers | { [index: string]: string; }'.
node_modules/tns-core-modules/declarations.d.ts(19,5): error TS2403: Subsequent variable declarations must have the same type. Variable 'mode' must be of type 'string', but here has type 'RequestMode'.
node_modules/tns-core-modules/declarations.d.ts(20,5): error TS2403: Subsequent variable declarations must have the same type. Variable 'credentials' must be of type 'string', but here has type 'RequestCredentials'.
node_modules/tns-core-modules/declarations.d.ts(21,5): error TS2403: Subsequent variable declarations must have the same type. Variable 'cache' must be of type 'string', but here has type 'RequestCache'.
node_modules/tns-core-modules/declarations.d.ts(36,15): error TS2300: Duplicate identifier 'Headers'.
node_modules/tns-core-modules/declarations.d.ts(46,5): error TS2687: All declarations of 'bodyUsed' must have identical modifiers.
node_modules/tns-core-modules/declarations.d.ts(56,15): error TS2300: Duplicate identifier 'Response'.
node_modules/tns-core-modules/declarations.d.ts(72,5): error TS2687: All declarations of 'status' must have identical modifiers.
node_modules/tns-core-modules/declarations.d.ts(73,5): error TS2687: All declarations of 'statusText' must have identical modifiers.
node_modules/tns-core-modules/declarations.d.ts(74,5): error TS2403: Subsequent variable declarations must have the same type. Variable 'headers' must be of type 'any', but here has type 'HeaderInit'.
node_modules/tns-core-modules/declarations.d.ts(74,5): error TS2687: All declarations of 'headers' must have identical modifiers.
node_modules/tns-core-modules/declarations.d.ts(78,14): error TS2300: Duplicate identifier 'BodyInit'.
node_modules/tns-core-modules/declarations.d.ts(79,14): error TS2300: Duplicate identifier 'RequestInfo'.
node_modules/tns-core-modules/es-collections.d.ts(15,5): error TS2687: All declarations of 'size' must have identical modifiers.
node_modules/tns-core-modules/es-collections.d.ts(19,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'Map' must be of type 'MapConstructor', but here has type '{ new <K, V>(): Map<K, V>; new <K, V>(m: Map<K, V>): Map<K, V>; new <K, V>(l: List<any>): Map<K, ...'.
node_modules/tns-core-modules/es-collections.d.ts(30,14): error TS2300: Duplicate identifier 'MapConstructor'.
node_modules/tns-core-modules/es-collections.d.ts(31,14): error TS2300: Duplicate identifier 'SetConstructor'.
node_modules/tns-core-modules/es-collections.d.ts(39,5): error TS2687: All declarations of 'size' must have identical modifiers.
node_modules/tns-core-modules/es-collections.d.ts(41,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'Set' must be of type 'SetConstructor', but here has type '{ new <T>(): Set<T>; new <T>(s: Set<T>): Set<T>; new <T>(l: List<T>): Set<T>; prototype: Set<any>...'.
node_modules/tns-core-modules/es-collections.d.ts(54,5): error TS2687: All declarations of 'value' must have identical modifiers.
node_modules/tns-core-modules/es6-promise.d.ts(98,5): error TS2687: All declarations of 'prototype' must have identical modifiers.
node_modules/tns-core-modules/es6.d.ts(7,5): error TS2687: All declarations of 'prototype' must have identical modifiers.
node_modules/tns-core-modules/es6.d.ts(9,5): error TS2687: All declarations of 'iterator' must have identical modifiers.
node_modules/tns-core-modules/weakmap.d.ts(3,11): error TS2428: All declarations of 'WeakMap' must have identical type parameters.
node_modules/tns-core-modules/weakmap.d.ts(11,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'WeakMap' must be of type 'WeakMapConstructor', but here has type 'new <K, V>() => WeakMap<K, V>'.
node_modules/tns-core-modules/weakmap.d.ts(12,27): error TS2344: Type 'K' does not satisfy the constraint 'object'.
node_modules/typescript/lib/lib.dom.d.ts(1104,5): error TS2687: All declarations of 'status' must have identical modifiers.
node_modules/typescript/lib/lib.dom.d.ts(1105,5): error TS2687: All declarations of 'statusText' must have identical modifiers.
node_modules/typescript/lib/lib.dom.d.ts(1106,5): error TS2687: All declarations of 'headers' must have identical modifiers.
node_modules/typescript/lib/lib.dom.d.ts(6945,11): error TS2300: Duplicate identifier 'Headers'.
node_modules/typescript/lib/lib.dom.d.ts(6954,13): error TS2300: Duplicate identifier 'Headers'.
node_modules/typescript/lib/lib.dom.d.ts(9343,11): error TS2300: Duplicate identifier 'Request'.
node_modules/typescript/lib/lib.dom.d.ts(9360,13): error TS2300: Duplicate identifier 'Request'.
node_modules/typescript/lib/lib.dom.d.ts(9365,11): error TS2300: Duplicate identifier 'Response'.
node_modules/typescript/lib/lib.dom.d.ts(9376,13): error TS2300: Duplicate identifier 'Response'.
node_modules/typescript/lib/lib.dom.d.ts(13491,14): error TS2687: All declarations of 'bodyUsed' must have identical modifiers.
node_modules/typescript/lib/lib.dom.d.ts(14898,6): error TS2300: Duplicate identifier 'BodyInit'.
node_modules/typescript/lib/lib.dom.d.ts(14929,6): error TS2300: Duplicate identifier 'RequestInfo'.
node_modules/typescript/lib/lib.es2015.collection.d.ts(28,14): error TS2687: All declarations of 'size' must have identical modifiers.
node_modules/typescript/lib/lib.es2015.collection.d.ts(31,11): error TS2300: Duplicate identifier 'MapConstructor'.
node_modules/typescript/lib/lib.es2015.collection.d.ts(65,14): error TS2687: All declarations of 'size' must have identical modifiers.
node_modules/typescript/lib/lib.es2015.collection.d.ts(68,11): error TS2300: Duplicate identifier 'SetConstructor'.
node_modules/typescript/lib/lib.es2015.iterable.d.ts(28,14): error TS2687: All declarations of 'iterator' must have identical modifiers.
node_modules/typescript/lib/lib.es2015.iterable.d.ts(33,5): error TS2687: All declarations of 'value' must have identical modifiers.
node_modules/typescript/lib/lib.es2015.iterable.d.ts(118,11): error TS2300: Duplicate identifier 'MapConstructor'.
node_modules/typescript/lib/lib.es2015.iterable.d.ts(135,11): error TS2300: Duplicate identifier 'SetConstructor'.
node_modules/typescript/lib/lib.es2015.promise.d.ts(26,14): error TS2687: All declarations of 'prototype' must have identical modifiers.
node_modules/typescript/lib/lib.es2015.symbol.d.ts(33,14): error TS2687: All declarations of 'prototype' must have identical modifiers.
TypeScript compiler failed with exit code 1
D:\code\nativescript\sample-ng-todomvc>
Fresh NativeScript install on macOSX Sierra 10.12, the first download:
...
** BUILD SUCCEEDED **
Project successfully built
Successfully deployed on device with identifier '1194172D-FEA0-4E08-B5A7-2EC772C85EAD'.
Sep 22 16:56:20 Andreass-MacBook samplengtodomvc[90519]: 1 0x10191b8d7 -[TNSRuntime executeModule:]
Sep 22 16:56:20 Andreass-MacBook samplengtodomvc[90519]: 2 0x1014c66d2 main
Sep 22 16:56:20 Andreass-MacBook samplengtodomvc[90519]: 3 0x10583168d start
Sep 22 16:56:20 Andreass-MacBook samplengtodomvc[90519]: 4 0x1
Sep 22 16:56:20 Andreass-MacBook samplengtodomvc[90519]: file:///app/tns_modules/http/http-request.js:7:74: JS ERROR TypeError: NSURLSessionConfiguration.defaultSessionConfiguration is not a function. (In 'NSURLSessionConfiguration.defaultSessionConfiguration()', 'NSURLSessionConfiguration.defaultSessionConfiguration' is an instance of NSURLSessionConfiguration)
Sep 22 16:56:20 Andreass-MacBook com.apple.CoreSimulator.SimDevice.1194172D-FEA0-4E08-B5A7-2EC772C85EAD.launchd_sim[30737] (UIKitApplication:org.nativescript.samplengtodomvc[0xcf76][90519]): Service exited due to Segmentation fault: 11
What is wrong?
Simply run tns run ios --bundle and you will see:
Project successfully built
Successfully deployed on device with identifier '00A4117D-42D7-4D34-A741-4D4FAA4286CD'.
Sep 27 05:52:05 MacBook-Pro-de-Ignacio samplengtodomvc[42822]: 1 0x109fe38d7 -[TNSRuntime executeModule:]
Sep 27 05:52:05 MacBook-Pro-de-Ignacio samplengtodomvc[42822]: 2 0x109b956d2 main
Sep 27 05:52:05 MacBook-Pro-de-Ignacio samplengtodomvc[42822]: 3 0x10d44592d start
Sep 27 05:52:05 MacBook-Pro-de-Ignacio samplengtodomvc[42822]: file:///app/app.js:3:25: JS ERROR Error: Could not find module 'nativescript-angular/platform'. Computed path '/Users/ignacio/Library/Developer/CoreSimulator/Devices/00A4117D-42D7-4D34-A741-4D4FAA4286CD/data/Containers/Bundle/Application/58555297-A61A-47DD-A870-CD68B67C8FEA/samplengtodomvc.app/app/tns_modules/nativescript-angular/platform'.
Sep 27 05:52:05 MacBook-Pro-de-Ignacio com.apple.CoreSimulator.SimDevice.00A4117D-42D7-4D34-A741-4D4FAA4286CD.launchd_sim[71640] (UIKitApplication:org.nativescript.samplengtodomvc[0xa4c8][42822]): Service exited due to signal: Segmentation fault: 11
When trying to run in Windows through emulator I get an error....
root|nativescript-todo>tns livesync android --emulator --watch
npm WARN package.json [email protected] license should be a valid SPDX license expression
Executing before-prepare hook from C:\msweb\nativescript-todo\hooks\before-prepare\nativescript-dev-typescript.js
Found peer TypeScript 1.8.10
Project successfully prepared
Executing after-prepare hook from C:\msweb\nativescript-todo\hooks\after-prepare\nativescript-unit-test-runner.js
Executing before-livesync hook from C:\msweb\nativescript-todo\hooks\before-livesync\nativescript-angular-sync .js
Executing before-livesync hook from C:\msweb\nativescript-todo\hooks\before-livesync\nativescript-restart-on-sync-plugin.js
Cannot find module 'nativescript-restart-on-sync-plugin/hooks/before-livesync'
root|nativescript-todo>
Executing before-prepare hook from c:\Users***\Source\Local\NativeScript\sample-ng-todomvc\hooks\before-prepare\nativescript-dev-typescript.js
Found peer TypeScript 1.8.2
node_modules/angular2/src/facade/promise.d.ts(1,10): error TS2661: Cannot re-export name that is not defined in the module.
TypeScript compiler failed with exit code 1
Sending exception report (press Ctrl+C to stop).......
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.