Ionic-app-scripts: watch is not working as expected

[rolandjitsu]

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

It seems that with the new 0.0.47 release the watch script is not doing anything anymore. Whatever file I change in src/, there is nothing happening.

What behavior are you expecting?

It should transpile TS files, copy templates, etc.

Steps to reproduce:

1. Setup an Ionic 2 app
2. Run npm run ionic:serve

My package.json as of now:

{
    "name": "ionic-test-app",
    "version": "0.0.0",
    "description": "",
    "keywords": [],
    "homepage": "",
    "license": "MIT",
    "author": {
        "name": "Roland Groza",
        "email": "[email protected]"
    },
    "repository": {
        "type": "git",
        "url": ""
    },
    "scripts": {
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve",
        "ionic:clean": "ionic-app-scripts clean",
        "ionic:lint": "ionic-app-scripts lint"
    },
    "config": {
        "ionic_bundler": "rollup",
        "ionic_rollup": "./config/rollup.config.js",
        "ionic_copy": "./config/copy.config.js"
    },
    "dependencies": {
        "@angular/common": "2.1.1",
        "@angular/compiler": "2.1.1",
        "@angular/compiler-cli": "2.1.1",
        "@angular/core": "2.1.1",
        "@angular/forms": "2.1.1",
        "@angular/http": "2.1.1",
        "@angular/platform-browser": "2.1.1",
        "@angular/platform-browser-dynamic": "2.1.1",
        "@angular/platform-server": "2.1.1",
        "@ionic/storage": "1.1.6",
        "core-js": "^2.4.1",
        "ionic-angular": "2.0.0-rc.3",
        "ionic-native": "^2.2.6",
        "ionicons": "3.0.0",
        "potion-client": "^0.21.5",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.12",
        "zone.js": "^0.6.26"
    },
    "devDependencies": {
        "@ionic/app-scripts": "0.0.47",
        "@types/node": "^6.0.46",
        "codelyzer": "^1.0.0-beta.4",
        "cordova": "^6.4.0",
        "ionic": "^2.1.17",
        "ip": "^1.1.4",
        "rollup-plugin-replace": "^1.1.1",
        "tslint-ionic-rules": "^0.0.8",
        "typescript": "2.0.10"
    },
    "engines": {
        "node": ">= 6.4"
    },
    "cordovaPlugins": [
        "cordova-plugin-device",
        "cordova-plugin-console",
        "cordova-plugin-whitelist",
        "cordova-plugin-splashscreen",
        "cordova-plugin-statusbar",
        "ionic-plugin-keyboard",
        "ionic-plugin-deploy",
        "cordova-plugin-camera",
        "cordova-plugin-compat",
        "phonegap-nfc"
    ],
    "cordovaPlatforms": [
    ]
}

copy.config.js:

// This is a custom dictionary to make it easy to extend/override.
// Provide a name for an entry, it can be anything such as 'copyAssets' or 'copyFonts',
// then provide an object with a `src` array of globs and a `dest` string.
// Source: https://github.com/driftyco/ionic-app-scripts/blob/master/config/copy.config.js
module.exports = {
    copyIndexContent: {
        src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
        dest: '{{WWW}}'
    },
    // Some packages and source code may use ES6 features,
    // therefore we provide shims/polyfills for ES6 features via core-js.
    // TODO: Eventually we will remove core-js once ES6 is stable enough
    copyPolyfills: {
        src: ['{{ROOT}}/node_modules/core-js/client/shim.min.js', '{{ROOT}}/node_modules/ionic-angular/polyfills/polyfills.js'],
        dest: '{{BUILD}}'
    },
    copyFonts: {
        src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
        dest: '{{WWW}}/assets/fonts'
    },
    copyAssets: {
        src: ['{{SRC}}/assets/**/*'],
        dest: '{{WWW}}/assets'
    }
};

And rollup.config.js:

// For reference, check the following:
// https://github.com/driftyco/ionic-app-scripts/blob/master/config/rollup.config.js
// Config borrowed from: https://github.com/driftyco/ionic-cli/issues/1205#issuecomment-255744604
const nodeResolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
const globals = require('rollup-plugin-node-globals');
const builtins = require('rollup-plugin-node-builtins');
const json = require('rollup-plugin-json');
// We will use the machine ip to make HTTP requests to the local machine from an external device while in dev mode.
const ip = require('ip');
// We use the replace plugin to provide the correct env variables
const replace = require('rollup-plugin-replace');

console.log(process.env.IONIC_ENV, process.env)


// https://github.com/rollup/rollup/wiki/JavaScript-API
const config = {
    /**
     * entry: The bundle's starting point. This file will
     * be included, along with the minimum necessary code
     * from its dependencies
     */
    entry: process.env.IONIC_APP_ENTRY_POINT,

    /**
     * sourceMap: If true, a separate sourcemap file will
     * be created.
     */
    sourceMap: process.env.IONIC_GENERATE_SOURCE_MAP ? true : false,

    /**
     * format: The format of the generated bundle
     */
    format: 'iife',

    /**
     * dest: the output filename for the bundle in the buildDir
     */
    dest: process.env.IONIC_OUTPUT_JS_FILE_NAME,

    /**
     * plugins: Array of plugin objects, or a single plugin object.
     * See https://github.com/rollup/rollup/wiki/Plugins for more info.
     */
    plugins: [
        builtins(),
        commonjs(),
        nodeResolve({
            module: true,
            jsnext: true,
            main: true,
            browser: true,
            extensions: ['.js']
        }),
        globals(),
        json(),
        replace({
            values: {
                '{{API_HOST}}': process.env.IONIC_ENV === 'prod' ? 'https://test-api.herokuapp.com' : `http://${ip.address()}:8888`
            },
            // Config
            exclude: 'node_modules/**'
        })
    ]

};

module.exports = config;

Which @ionic/app-scripts version are you using?
0.0.47

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

[fifafu]

For me live-reload / watch has also stopped working completely with 0.0.47. Attached is my package.json. I'm using webpack.
package.json.zip

[marcoturi]

same here, watching is not working

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0 
ios-sim version: 5.0.12 
OS: OS X El Capitan
Node Version: v7.1.0
Xcode version: Xcode 8.1 Build version 8B62

using webpack with default configs

[gabriele-v]

Same problem: all at default, I've only customized ionic_copy.
Watch was working fine with same custom ionic_copy and app-scripts 0.0.46

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.9.1
Xcode version: Not installed

[Schwobaland]

Same here: Customized copy.config.js. Livereloading not working since 0.0.47.

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0
ios-sim version: 5.0.12
OS: macOS Sierra
Node Version: v7.2.1
Xcode version: Xcode 8.1 Build version 8T61a

[cmaart]

Can confirm. Watch is not working for me as well.
Aaaand back we go to an older app-scripts version.. again.. so frustrating!

[stovmascript]

Have the same issue. When I remove my custom ionic_copy, watch works as expected.

$ ionic info
Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.2
Xcode version: Xcode 8.1 Build version 8B62

Here are the configs:

// package.json
{
  // ...
  "config": {
    "ionic_copy": "copy.config.js",
    // ...
  }
}

// copy.config.js
const defaultConfig = require('@ionic/app-scripts/config/copy.config');

module.exports = Object.assign({}, defaultConfig, {
    copyFonts: Object.assign({}, defaultConfig.copyFonts, {
        src: defaultConfig.copyFonts.src.concat([
            '{{ROOT}}/node_modules/font-awesome/fonts/**/*',
        ]),
    }),
});

[fifafu]

Just to add to my above comment: I'm also using a custom copy config file, so it seems like the issue is caused by custom copy configs.

[leifwells]

I am using a custom copy config. When I use ionic serve I get this error:

[10:55:10]  ionic-app-script task: "watch"
[10:55:10]  TypeError: Cannot read property 'rootDir' of undefined

and later:

(node:59604) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: channel closed

[rolandjitsu]

@leifwells this has been reported in #533. Probably unrelated to this issue.

[leifwells]

Thanks, @rolandjitsu, I had not seen that issue. Sigh.

[danbucholtz]

This issue is resolved and will be published out in 0.0.48 tomorrow. Sorry, this one slipped through the cracks. I did not test the copy changes with a custom config. I've added unit tests so this won't happen again. I'll close this tomorrow after we publish.

Thanks,
Dan

[tuvokki]

Hi Dan,

I've been testing locally with the latest master, and can confirm this issue is resolved, but I'd like to run 0.0.48 everywhere. About 4 days ago you said it will be published 'tomorrow'. When can I expect it?

Grz,
Wouter

[danbucholtz]

All,

Sorry, I have been trying to fix another issue to get into 0.0.48 but it is taking too much time. I keep getting dragged into other stuff too.

Please install npm install @ionic/app-scripts@nightly for now. I will get this out ASAP.

Thanks,
Dan

[danbucholtz]

Hi all,

This is resolved in 0.0.48 which was just published.

Please let me know if you have any issues.

Thanks,
Dan

[rolandjitsu]

I can confirm this is working now 👍

[tuvokki]

Thanks Dan, it working like sunshine on a moody day ;)