Livesync doesn't work when make some changes in *.ts files

ios
android

#1

Hello everybody. I have some problems with live sync.

I run my app.

➜  mobile_ns git:(master) ✗ tns run ios
Searching for devices...
Preparing project...
Project successfully prepared (iOS)
Successfully transferred all files.
Refreshing application...
Successfully synced application name of app  on device (device id ).
CONSOLE LOG file:///app/tns_modules/@angular/core/bundles/core.umd.js:2957:20: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
CONSOLE ERROR file:///app/app.component.js:87:26: NSConcreteNotification 0x600000a40810 {name = didFailToRegisterForRemoteNotificationsWithError; object = <Push: 0x600000830340>; userInfo = {

I make some changes in *.ts file.

Example: change string of state in a file. And don’t have any information about a change in a terminal.

After that, I make some changes in *.html and I see all my previous changes.

My env.

➜  mobile_ns git:(master) ✗ node -v
v6.11.0
➜  mobile_ns git:(master) ✗ tsc -v
Version 2.0.6
➜  mobile_ns git:(master) ✗ nativescript --version
3.4.3
➜  mobile_ns git:(master) ✗ tns info
All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬─────────────┐
│ Component        │ Current version │ Latest version │ Information │
│ nativescript     │ 3.4.3           │ 3.4.3          │ Up to date  │
│ tns-core-modules │ 3.4.1           │ 3.4.1          │ Up to date  │
│ tns-android      │ 3.4.2           │ 3.4.2          │ Up to date  │
│ tns-ios          │ 3.4.1           │ 3.4.1          │ Up to date  │

➜  mobile_ns git:(master) ✗ cat package.json
{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "some id",
    "tns-android": {
      "version": "3.4.2"
    },
    "tns-ios": {
      "version": "3.4.1"
    }
  },
  "scripts": {
    "run:android": "tns run android",
    "run:ios": "tns run ios",
    "debug:android": "tns debug android",
    "debug:ios": "tns debug ios",
    "build:dev": "tns build android",
    "ns-bundle": "ns-bundle",
    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
    "start-android-bundle": "npm run ns-bundle --android --run-app",
    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  },
  "dependencies": {
    "@angular/animations": "~4.4.6",
    "@angular/common": "~4.4.6",
    "@angular/compiler": "~4.4.6",
    "@angular/core": "~4.4.6",
    "@angular/forms": "~4.4.6",
    "@angular/http": "~4.4.6",
    "@angular/platform-browser": "~4.4.6",
    "@angular/platform-browser-dynamic": "~4.4.6",
    "@angular/router": "~4.4.6",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^2.0.5",
    "@ngrx/store": "^2.2.3",
    "@ngx-translate/core": "^7.2.2",
    "angular-tslint-rules": "^1.2.1",
    "compare-versions": "^3.1.0",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.4",
    "moment": "^2.19.2",
    "nativescript-angular": "~4.4.1",
    "nativescript-appversion": "^1.4.1",
    "nativescript-camera": "^3.1.4",
    "nativescript-checkbox": "^2.1.14",
    "nativescript-directions": "^1.1.0",
    "nativescript-google-maps-sdk": "^2.3.2",
    "nativescript-iqkeyboardmanager": "^1.1.0",
    "nativescript-ngx-slides": "0.3.2",
    "nativescript-purchase": "^1.0.5",
    "nativescript-push-notifications": "^1.1.0",
    "nativescript-sentry": "^1.5.2",
    "nativescript-snackbar": "^1.1.7",
    "nativescript-telerik-ui": "~3.1.4",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.10",
    "reselect": "^3.0.1",
    "rxjs": "~5.5.2",
    "tns-core-modules": "^3.4.1",
    "zone.js": "~0.8.18"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.4.6",
    "@ngtools/webpack": "~1.6.0",
    "@types/jwt-decode": "^2.2.1",
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "codelyzer": "^4.1.0",
    "copy-webpack-plugin": "~4.0.1",
    "extract-text-webpack-plugin": "~3.0.0",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-custom-entitlements": "^0.2.0",
    "nativescript-dev-sass": "^1.1.1",
    "nativescript-dev-typescript": "~0.5.1",
    "nativescript-dev-webpack": "^0.8.0",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.1.0",
    "tslint": "^5.9.1",
    "typescript": "~2.3.4",
    "webpack": "~3.2.0",
    "webpack-bundle-analyzer": "^2.8.2",
    "webpack-sources": "~1.0.1"
  }
}

  mobile_ns git:(master) ✗ cat webpack.config.js
const { resolve, join  } = require("path");

const webpack = require("webpack");
const nsWebpack = require("nativescript-dev-webpack");
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

const { AotPlugin } = require("@ngtools/webpack");

let mainSheet = `app.css`;

module.exports = env => {
    const platform = getPlatform(env);
    mainSheet = `app.${platform}.css`;

    // Default destination inside platforms/<platform>/...
    const path = resolve(nsWebpack.getAppPath(platform));

    const entry = {
        // Discover entry module from package.json
        bundle: `./${nsWebpack.getEntryModule()}`,

        // Vendor entry with third-party libraries
        vendor: `./vendor`,

        // Entry for stylesheet with global application styles
        [mainSheet]: `./${mainSheet}`,
    };

    const rules = getRules();
    const plugins = getPlugins(platform, env);
    const extensions = getExtensions(platform);

    const config = {
        context: resolve("./app"),
        target: nativescriptTarget,
        entry,
        output: {
            pathinfo: true,
            path,
            libraryTarget: "commonjs2",
            filename: "[name].js",
        },
        resolve: {
            extensions,

            // Resolve {N} system modules from tns-core-modules
            modules: [
                "node_modules/tns-core-modules",
                "node_modules",
            ],

            alias: {
                '~': resolve("./app")
            },
        },
        node: {
            // Disable node shims that conflict with NativeScript
            "http": false,
            "timers": false,
            "setImmediate": false,
            "fs": "empty",
        },
        module: { rules },
        plugins,
    };

    if (env.snapshot) {
        plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
            chunk: "vendor",
            projectRoot: __dirname,
            webpackConfig: config,
            targetArchs: ["arm", "arm64", "ia32"],
            tnsJavaClassesOptions: { packages: ["tns-core-modules" ] },
            useLibs: false
        }));
    }

    return config;
};


function getPlatform(env) {
    return env.android ? "android" :
        env.ios ? "ios" :
        () => { throw new Error("You need to provide a target platform!") };
}

function getRules() {
    return [
        {
            test: /\.html$|\.xml$/,
            use: [
                "raw-loader",
            ]
        },
        // Root stylesheet gets extracted with bundled dependencies
        {
            test: new RegExp(mainSheet),
            use: ExtractTextPlugin.extract([
                {
                    loader: "resolve-url-loader",
                    options: { silent: true },
                },
                {
                    loader: "nativescript-css-loader",
                    options: { minimize: false }
                },
                "nativescript-dev-webpack/platform-css-loader",
            ]),
        },
        // Other CSS files get bundled using the raw loader
        {
            test: /\.css$/,
            exclude: new RegExp(mainSheet),
            use: [
                "raw-loader",
            ]
        },
        // SASS support
        {
            test: /\.scss$/,
            use: [
                "raw-loader",
                "resolve-url-loader",
                "sass-loader",
            ]
        },


        // Compile TypeScript files with ahead-of-time compiler.
        {
            test: /\.ts$/,
            loaders: [
                "nativescript-dev-webpack/tns-aot-loader",
                "@ngtools/webpack",
            ]
        }

    ];
}

function getPlugins(platform, env) {
    let plugins = [
        new ExtractTextPlugin(mainSheet),

        // Vendor libs go to the vendor.js chunk
        new webpack.optimize.CommonsChunkPlugin({
            name: ["vendor"],
        }),

        // Define useful constants like TNS_WEBPACK
        new webpack.DefinePlugin({
            "global.TNS_WEBPACK": "true",
        }),

        // Copy assets to out dir. Add your own globs as needed.
        new CopyWebpackPlugin([
            { from: mainSheet },
            { from: "css/**" },
            { from: "fonts/**" },
            { from: "**/*.jpg" },
            { from: "**/*.png" },
            { from: "**/*.xml" },
        ], { ignore: ["App_Resources/**"] }),

        // Generate a bundle starter script and activate it in package.json
        new nsWebpack.GenerateBundleStarterPlugin([
            "./vendor",
            "./bundle",
        ]),

        // Generate report files for bundles content
        new BundleAnalyzerPlugin({
            analyzerMode: "static",
            openAnalyzer: false,
            generateStatsFile: true,
            reportFilename: join(__dirname, "report", `report.html`),
            statsFilename: join(__dirname, "report", `stats.json`),
        }),

        // Angular AOT compiler
        new AotPlugin({
            tsConfigPath: "tsconfig.aot.json",
            entryModule: resolve(__dirname, "app/app.module#AppModule"),
            typeChecking: false
        }),

        // Resolve .ios.css and .android.css component stylesheets, and .ios.html and .android component views
        new nsWebpack.UrlResolvePlugin({
            platform: platform,
            resolveStylesUrls: true,
            resolveTemplateUrl: true
        }),

    ];

    if (env.uglify) {
        plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));

        // Work around an Android issue by setting compress = false
        const compress = platform !== "android";
        plugins.push(new webpack.optimize.UglifyJsPlugin({
            mangle: { except: nsWebpack.uglifyMangleExcludes },
            compress,
        }));
    }

    return plugins;
}

// Resolve platform-specific modules like module.android.js
function getExtensions(platform) {
    return Object.freeze([
        `.${platform}.ts`,
        `.${platform}.js`,
        ".aot.ts",
        ".ts",
        ".js",
        ".css",
        `.${platform}.css`,
    ]);
}

#2

Can you verify that your .ts files are being transpiled into .js files? Just want to make sure that isn’t the core issue.