Gulp + Webpack + Awesome-Typescript-Loader = no recompiling

Question

The app is scaffolded with yeoman gulp-angular generator. Webpack is for module managing, code is in type TypeScript and is transpiled by awesome-typescript-loader. I run gulp serve to start my local webserver and everything goes right:

[10:55:37] Using gulpfile ~\Sviluppo\app\gulpfile.js
[10:55:37] Starting 'scripts'...
[10:55:37] Starting 'markups'...
[10:55:38] Starting 'styles'...
[10:55:39] Finished 'markups' after 2.03 s
[10:55:39] gulp-inject 2 files into index.scss.
[10:55:45] Finished 'styles' after 7.15 s
[10:55:51] Time: 11672ms
          Asset   Size  Chunks             Chunk Names
index.module.js  13 kB       0  [emitted]  main

ERROR in [default] C:/Users/Rick/Sviluppo/app/src/app/components/malarkey/malarkey.directive.ts:25:15
Property 'malarkey' is private and only accessible within class 'MalarkeyController'.
[10:55:51] Finished 'scripts' after 14 s
[10:55:51] Starting 'scripts:watch'...
[10:55:51] Starting 'inject'...
[10:55:51] gulp-inject 1 files into index.html.
[10:55:51] gulp-inject 1 files into index.html.
[10:55:51] Finished 'inject' after 233 ms
[10:55:57] Time: 5691ms
          Asset     Size  Chunks             Chunk Names
index.module.js  34.3 kB       0  [emitted]  main

ERROR in [default] C:/Users/Rick/Sviluppo/app/src/app/components/malarkey/malarkey.directive.ts:25:15
Property 'malarkey' is private and only accessible within class 'MalarkeyController'.
[10:55:57] Finished 'scripts:watch' after 5.76 s
[10:55:57] Starting 'watch'...
[10:55:57] Finished 'watch' after 161 ms
[10:55:57] Starting 'serve'...
[10:55:57] Finished 'serve' after 115 ms
[10:55:57] webpack is watching for changes
[BS] [BrowserSync SPA] Running...
[BS] Access URLs:
 -----------------------------------
       Local: http://localhost:3000/
    External: http://10.9.0.6:3000/
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://10.9.0.6:3001
 -----------------------------------
[BS] Serving files from: .tmp\serve
[BS] Serving files from: src

(Errors are caused by a bug in the ts code, nothing to do with my issue..)

Let's say now I delete the whole content in index.module.ts:

/// <reference path="../../.tmp/typings/tsd.d.ts" />

import { config } from './index.config';
import { routerConfig } from './index.route';
import { runBlock } from './index.run';
import { MainController } from './main/main.controller';
import { GithubContributor } from '../app/components/githubContributor/githubContributor.service';
import { WebDevTecService } from '../app/components/webDevTec/webDevTec.service';
import { acmeNavbar } from '../app/components/navbar/navbar.directive';
import { acmeMalarkey } from '../app/components/malarkey/malarkey.directive';

declare var malarkey: any;
declare var moment: moment.MomentStatic;

module app {
  'use strict';

  angular.module('app', ['ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'toastr'])
    .constant('malarkey', malarkey)
    .constant('moment', moment)
    .config(config)
    .config(routerConfig)
    .run(runBlock)
    .service('githubContributor', GithubContributor)
    .service('webDevTec', WebDevTecService)
    .controller('MainController', MainController)
    .directive('acmeNavbar', acmeNavbar)
    .directive('acmeMalarkey', acmeMalarkey);
}

leaving it as blank file. Here is what webpack does:

[11:02:07] Time: 2481ms
          Asset     Size  Chunks       Chunk Names
index.module.js  34.3 kB       0       main

ERROR in [default] C:/Users/Rick/Sviluppo/viravox-fe/src/app/components/malarkey/malarkey.directive.ts:25:15
Property 'malarkey' is private and only accessible within class 'MalarkeyController'.
[BS] Reloading Browsers...
[11:02:07] webpack is watching for changes

Go to see in my browser and nothing is changed, everything works like a charm. In my loaded scripts index.module.js is:

// other codes...
/***/ function(module, exports, __webpack_require__) {

    /// <reference path="../../.tmp/typings/tsd.d.ts" />
    var index_config_1 = __webpack_require__(1);
    var index_route_1 = __webpack_require__(2);
    var index_run_1 = __webpack_require__(3);
    var main_controller_1 = __webpack_require__(4);
    var githubContributor_service_1 = __webpack_require__(5);
    var webDevTec_service_1 = __webpack_require__(6);
    var navbar_directive_1 = __webpack_require__(7);
    var malarkey_directive_1 = __webpack_require__(8);
    var app;
    (function (app) {
        'use strict';
        angular.module('app', ['ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'toastr'])
            .constant('malarkey', malarkey)
            .constant('moment', moment)
            .config(index_config_1.config)
            .config(index_route_1.routerConfig)
            .run(index_run_1.runBlock)
            .service('githubContributor', githubContributor_service_1.GithubContributor)
            .service('webDevTec', webDevTec_service_1.WebDevTecService)
            .controller('MainController', main_controller_1.MainController)
            .directive('acmeNavbar', navbar_directive_1.acmeNavbar)
            .directive('acmeMalarkey', malarkey_directive_1.acmeMalarkey);
    })(app || (app = {}));
    //# sourceMappingURL=index.module.js.map

/***/ },
// other codes...

In order to see what I changed I have to stop and restart gulp serve

Any ideas?

Answer 1

Had a similar problem with pretty much the same tools. Was using Gulp to compile WebPack project, with 'awesome-typescript-loader' and 'webpack-dev-server'. Turns out there was something wrong with my 'publicPath' - I thought it was meant to be '/js/', but whenever the dev server refreshed, none of the changes came through. Tried using 'ts-loader' instead, but same thing happened. Got around it my using the "js" directory name in the 'filename', so my output looked like this.

output: {
    path: path.resolve(__dirname, hlp.getJSPath()),
    // , publicPath: '/js/',
    filename: 'js/[name].js'
}

and it was referenced in my HTML like this

<script src='/js/home-page.js'></script>

Hope this helps someone. Kept me up for a few hours!