Is it compatible with Angular2?

[xLama]

I noticed that if I use Angular2 NativeScript plugin, app needs to be restarted to show changes. There is not a realtime sync. Maybe I am doing something wrong.

To avoid restarting I must exclude Angular2 bootstrap file in tsconfig.json but app does not show changes. If I don´t exlude it, I can see changes after a restart

Tell me if you need more info.

Thanks.

[NathanaelA]

@xLama - I'm sorry; I have not tested any Angular code in LiveEdit; I have no idea what issues you might see with it.

Does the watcher.js show that it is syncing any files?

A couple notes:

1. If you are using .TS files; you do need something watching the folder to convert the .TS to a .JS file; as the device/emulator only runs on JS files. So if you don't have a background app doing TS->JS that will cause your issues as the watcher only watches JS file changes.
2. You might need to link files, i.e. you can tell LiveEdit that model.js is the model for somepage.js; this will allow LiveEdit to know to refresh the somepage.js when model.js is changed.

[xLama]

@NathanaelA

Yeah, watcher is syncing files. I run Android Emulator and LiveEdit (node watcher). When I "compile" TypeScript file, watcher does not do anything but when compilation ends, watcher sees changes and it push to emulator correctly. I think it could be a Angular2 issue due to DOM generation. I must try it more. I am very interesting in LiveEdit project, I think it is a better solution than official one and It works very nice.

I will keep you informed about my progress,

[kazemihabib]

I tested it with nativescript angular2 and it didn't work and the below is the result

Watching your project: org.nativescript.groceries
remote object '/data/data/org.nativescript.groceries/files/./app/package.json' does not exist
Error: remote object '/data/data/org.nativescript.groceries/files/./app/package.json' does not exist
 95
Using backup method for updates!

Checking updated file:  ./app/app.component.js

Checking updated file:  ./app/pages/list/list.component.js

Checking updated file:  ./app/pages/login/login.component.js

Checking updated file:  ./app/shared/config.js

Checking updated file:  ./app/main.js

Checking updated file:  ./app/shared/grocery/grocery-list.service.js

Checking updated file:  ./app/shared/user/user.service.js

Checking updated file:  ./app/utils/hint-util.js

Checking updated file:  ./app/shared/grocery/grocery.js

Checking updated file:  ./app/shared/user/user.js

Checking updated file:  ./app/utils/status-bar-util.js
---------------------------------------------------------------------------------------
---- Failed Sanity Tests on ./app/utils/status-bar-util.js
---------------------------------------------------------------------------------------
STDOut: ./app/utils/status-bar-util.js: line 31, col 21, Unexpected use of '|'.
./app/utils/status-bar-util.js: line 32, col 21, Unexpected use of '|'.
./app/utils/status-bar-util.js: line 33, col 21, Unexpected use of '|'.
./app/utils/status-bar-util.js: line 9, col 27, 'UIResponder' is not defined.
./app/utils/status-bar-util.js: line 11, col 17, 'UIApplication' is not defined.
./app/utils/status-bar-util.js: line 11, col 68, 'UIStatusBarStyle' is not defined.
./app/utils/status-bar-util.js: line 16, col 25, 'UIApplicationDelegate' is not defined.

7 errors

---------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------
---- Failed Sanity Tests on ./app/main.js
---------------------------------------------------------------------------------------
STDOut: ./app/main.js: line 2, col 18, Identifier 'application_1' is not in camel case.
./app/main.js: line 3, col 20, Identifier 'app_component_1' is not in camel case.
./app/main.js: line 5, col 14, Identifier 'application_1' is not in camel case.
./app/main.js: line 5, col 52, Identifier 'app_component_1' is not in camel case.

4 errors

---------------------------------------------------------------------------------------

Pushed to Device:  ./app/pages/login/login.component.js /data/local/tmp/org.nativescript.groceries/pages%2Flogin%2Flogin%2Ecomponent%2Ejs
Pushed to Device:  ./app/shared/grocery/grocery.js /data/local/tmp/org.nativescript.groceries/shared%2Fgrocery%2Fgrocery%2Ejs
Pushed to Device:  ./app/shared/user/user.js /data/local/tmp/org.nativescript.groceries/shared%2Fuser%2Fuser%2Ejs
Pushed to Device:  ./app/utils/hint-util.js /data/local/tmp/org.nativescript.groceries/utils%2Fhint-util%2Ejs
---------------------------------------------------------------------------------------
---- Failed Sanity Tests on ./app/app.component.js
---------------------------------------------------------------------------------------
STDOut: ./app/app.component.js: line 2, col 19, Possible strict violation.
./app/app.component.js: line 2, col 27, Possible strict violation.
./app/app.component.js: line 5, col 80, Expected a conditional expression and instead saw an assignment.
./app/app.component.js: line 8, col 19, Possible strict violation.
./app/app.component.js: line 8, col 27, Possible strict violation.
./app/app.component.js: line 11, col 11, Identifier 'core_1' is not in camel case.
./app/app.component.js: line 19, col 15, Identifier 'core_1' is not in camel case.
./app/app.component.js: line 18, col 5, Reassignment of 'AppComponent', which is is a function. Use 'var' or 'let' to declare bindings that may change.
./app/app.component.js: line 4, col 47, 'Reflect' is not defined.
./app/app.component.js: line 4, col 84, 'Reflect' is not defined.
./app/app.component.js: line 9, col 47, 'Reflect' is not defined.
./app/app.component.js: line 9, col 87, 'Reflect' is not defined.

12 errors

---------------------------------------------------------------------------------------

Pushed to Device:  ./app/pages/list/list.component.js /data/local/tmp/org.nativescript.groceries/pages%2Flist%2Flist%2Ecomponent%2Ejs
Pushed to Device:  ./app/shared/grocery/grocery-list.service.js /data/local/tmp/org.nativescript.groceries/shared%2Fgrocery%2Fgrocery-list%2Eservice%2Ejs
Pushed to Device:  ./app/shared/config.js /data/local/tmp/org.nativescript.groceries/shared%2Fconfig%2Ejs
Pushed to Device:  ./app/shared/user/user.service.js /data/local/tmp/org.nativescript.groceries/shared%2Fuser%2Fuser%2Eservice%2Ejs

I just changed the ./app/app.component.ts and typescript transpiles it to ./app/app.component.js but the node-watcher detects lots of file change I checked the hash of them they are not changed.

I didn't read the source of plugin and I don't know how exactly it works,but I think if it founds an error in a file it will not deploy it to device so it finds errors in app.component.ts and it will not deploy it to device so I don't see any change in my app and I think if i disable the error checker It will deploy the file to device and I can see the changes. @NathanaelA can you help me to disable the error checker ?I don't know how to do it.

[NathanaelA]

If you open up the .jshintrc file; you can make the checks less strict. Or, if you really want the jshint checker disabled; I can add a option in the next version to disable it. However, I would just recommend you just make jshint a little less picky... ;-)

[bnussey]

Hey @NathanaelA so should this work with ng2 with amendments to jshint?

[kazemihabib]

I removed the error checking from watcher.js by commenting some lines from checkParsing function

function checkParsing(fileName) {
    console.log("\nChecking updated file: ", fileName);

    var callback = function(err, stdout , stderr) {
        // if (err && (err.code !== 0 || err.killed) ) {
        //     //console.log("Error: ", err);
        //     console.log("---------------------------------------------------------------------------------------");
        //     console.log("---- Failed Sanity Tests on", fileName);
        //     console.log("---------------------------------------------------------------------------------------");
        //     if (stdout) { console.log("STDOut:", stdout); }
        //     if (stderr) { console.log("STDErr:", stderr); }
        //     console.log("---------------------------------------------------------------------------------------\n");
        // } else {
            pushADB(fileName, function(err) {
                if (!err) {
                    isTestFile(fileName);
                }
            } );
        // }
    };

and renamed the login.html to login.xml and it almost worked but I should restart the app to see the changes.(like nativescript official livesync that it restarts the app for every change for angular-nativescript) If this works I think tslint can be used for typescript linting instead of jshint

[NathanaelA]

@bnussey I believe so. Most the issues in the past with TS code was that JSHint was too strict for TS generated JS. (TS does a couple things that JSHint by default doesn't like). If you tell JSHint to ignore those items it normally works fine with TS generated code.

See issue #5 for a JSHintrc file that works for another guy with TypeScript..

[NathanaelA]

@kazemihabib LiveEdit doesn't restart the app on xml changes; the idea is to reload the screen so that you see the changes. However LiveEdit is unaware of HTML files, and how to cause the screen to reload. I have not played with NS-Angular yet; it is on my list -- but just haven't made the time. Once I actually play with it; I'm sure I'll figure out these types of issues and get LiveEdit to be a first class citizen with NG2 code like it is currently with the standard code.

[bnussey]

Awesome thanks for the response @NathanaelA, really appreciate it, I'll give that a shot and go from there.

[NathanaelA]

The new version should have working TSLint support now; however, I haven't done any additional Angular2 support in it.

[iamnotagit]

Hi @bnussey

I was wondering did you manage to get this to work with ng2?

Thanks!

[NathanaelA]

At this moment it is still not NG2 compatible. In fact the ts support is not actually working well in the currently released version. I'm currently making it work well with TS code; the next version (unreleased) will have its own TS watcher/compiler built in, and smarts to not send a JS file when the TSLint failed. I'm using it myself in a ts based project and fixing the issues.

[bnussey]

Hey @iamnotagit yeah unfortunately I did not get it going.

[iamnotagit]

@NathanaelA @bnussey Thanks for your responses!

[NathanaelA]

Ok, I have TS support as a first class citizen now. That was a prerequisite to getting Angular support working. The current 2.2.0 release I've been using for a couple weeks and I'm happy with the TS support.

[IvRRimum]

This tool looks really powerfull. Where can i get NG2(typescript2) version? If i pay on patreon, will i get it?

[NathanaelA]

The Angular2 version has not been built yet. I needed to make sure all my TS support was working fully. I'm pretty happy with it; but I suspect I won't have time to touch NG2 support until mid to late next month (Oct). When it is built, it will be released on Patreon. ;-) I'm guessing v2.4 or 2.5 will have the :ng: 2 support. I will update this thread when :ng: support is working... :grinning:

[IvRRimum]

12 October :D I told my client about this plugin, so really want to use it with our ng2 project.

[NathanaelA]

I have actually started on Angular2 support; part of the code now works properly; but there is a lot more I need to do. :ng: has hooked into the NS system and is not using the standard NS way of doing some things... Once I figure out where the info is stored that was used to build the current screen (or how to hijack the info so I can store it); it should be working fully. Unfortunately the :ng: templates don't conform to proper XML; so I also have to figure out how I want to test the .html files... But all this is a very low priority since it is not paid work and none of my upcoming jobs are ng related...

[Cselt]

NG2 support would be really nice and helpful because official livesync is really slow :(