CLI tool doesn't restart app if HTML/CSS file was modified

[otaran]

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes, this works in version 2.5.x and is broken in 3.0.0.

Tell us about the problem

tns run ... will not restart the app if any HTML or CSS file was modified. It does restart the app if TS or JS file was modified. The output of tns run ios look like this:

Executing before-prepare hook from /Users/otaran/Developer/sandbox/test-html-css-sync/hooks/before-prepare/nativescript-dev-typescript.js
Preparing project...
Project successfully prepared (ios)
Transferring project files...
Successfully transferred item-detail.component.html.
Refreshing application...
Successfully synced application org.nativescript.testhtmlcsssync on device C6C627C7-F2F6-4FBC-9C52-1998C10EE2A6.

NativeScript debugger attached.

Which platform(s) does your issue occur on?

• Android
• iOS

Please provide the following version numbers that your issue occurs with:

$ tns --version
3.0.0
$ grep version node_modules/tns-core-modules/package.json
  "version": "3.0.0"
$ grep -A 5 tns-android package.json 
    "tns-android": {
      "version": "3.0.0"
    },
    "tns-ios": {
      "version": "3.0.0"
    }
$ grep nativescript- package.json 
    "nativescript-angular": "~3.0.0",
    "nativescript-theme-core": "~1.0.2",
    "nativescript-dev-typescript": "~0.4.0",

Please tell us how to recreate the issue in as much detail as possible.

1. Unpack and run
   test-html-css-sync.zip with tns run ios
2. Drill down to any row
3. Modify items.component.html or items.component.css
4. Watch how it syncs the file but does not restart the app (i.e. the app stays on the same page and changes are not applied)

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

No.

[dtopuzov]

The problem is that CLI do not restart the app.
Can be reproduced with hello-world-ng and iOS Simulator.

[eksahin]

I think this is happening when routing.
eg:

export class HomeComponent implements OnInit {
    constructor(private router: RouterExtensions, private authService: AuthService) {
        if (authService.hasUser()) {
            this.router.navigate(['main-view'], {animated: false, clearHistory: true});
        } else {
            this.router.navigate(['authorization/login'], {animated: false, clearHistory: true});
        }
        
    }

    ngOnInit() {

    }
}

In this case it is not updating html view

[otaran]

@dtopuzov , the issue is still reproducible for CSS files, but in a more subtle way: now tns run seems to apply CSS styles without restarting the app, so if you are on the very first page of your app, you will see your CSS applied, but if you are on some other page and change CSS file to trigger refresh, app gets into inconsistent state (for example it loses Back navigation button).

[dtopuzov]

Hi @otaran thanks for the report!
I think we can easily fix it if we also restart on css changes, but I'm not sure we can provide better fix at the moment.

Engineering team will consider possible options on Monday and we will update the issue.

[dtopuzov]

Hi @otaran It sounds like another case -> When you navigate to some page and then you sync we do not preserve application state.

If we do not restart the app you are in current situation -> back navigation do not work.
If we restart the app it will start from home page (not the one you navigated to).

Both situations are not ideal, so just logged separate issue for the problem, see #2814

[otaran]

@dtopuzov I don't mind if tns will restart the app on CSS change, in fact that's what I expect it to do. I described this use case just to demonstrate that tns 3.0.1 does NOT restart the app when CSS changes, leaving it in an inconsistent state. What I am trying to say is that the fix in 3.0.1 did NOT fix the issue completely - it did fix HTML change use case, but it didn't fix the CSS change use case.

[vultix]

Is there any update on this? The same issue @otaran is having is really slowing UI development down.

[petekanev]

@vultix There's an open PR that reverts some changes made to the CLI that used to restart the device on html/css changes. -> #2823

[otaran]

From what I've seen during {N} 3.0 webinar it appears that syncing HTML/CSS files without restarting the app is actually a feature of CLI 3.0. However, there are two issues affecting Angular-based apps:

1. If you change app.css, it does get applied to app UI without restarting the app. It does, however, breaks navigation - ActionBar buttons no longer work.
2. If you change a CSS file bound to an Angular component by @Component decorator, CLI appears to sync the file, but styles are not applied to UI.

In #2819 @yyosifov mentioned that it is actually a bug in Angular-Nativescript integration, so we will get fast sync in Angular-based apps soon! 🎉

[dtopuzov]

Hi @otaran @vultix let me explain the case:

In order to achieve better user-experience (reduce the time for sync and restart after that) we will restart Angular application itself (see NativeScript/NativeScript#4215) and CLI will not force restart entire application.

Fix is already available in tns-core-modules@next and nativescript@next.
I hope we will release it in official version by the end of the week.

How to test:

npm un -g nativescript
npm cache clean
npm i -g nativescript@next
tns create TestApp --ng
tns plugin remove tns-core-modules --path TestApp
tns plugin add tns-core-modules@next --path TestApp
tns run <platform> --path TestApp
Navigate to details page.
Change app.css (replace `core.light.css` with `core.dark.css`).

Result: Change is applied, NG app is restarted internally, no full restart of the native app.

[alekspetrov]

Hi, catched the same behaviour with nativescript-vue-webpack-template

To reproduce download fallow template usage docs and then try to change some .css or .scss and see that tns doesn't reload styles while you don't restart app. This is so annoying =(

Please, help )

[dtopuzov]

Hi @alekspetrov

Can you please log it as separate issue since it is vue specific.
At the moment vue is not officially supported by {N} CLI, but I hope we will have it as first class citizen at some point.