Gulp + Webpack + Awesome-Typoskript-Loader = kein Neukompilieren

Question

Die App ist gerüstet mit Yeomangulp-angular Generator. Webpack ist für Modulverwaltung, Code ist in Typ TypScript und wird von Awesome-typescript-loader transpiliert. Ich laufe gulp serve zu meinem lokalen Webserver und alles geht zu beginnen rechts:

[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 

Sagen wir jetzt (Fehler durch einen Fehler in der ts-Code, nichts zu tun mit meiner Frage .. verursacht werden) I Löschen Sie den gesamten Inhalt 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); 
} 

verlassen es als leere Datei. Hier ist, was Webpack macht:

Gehen Sie in meinem Browser zu sehen und nichts ist verändert, alles funktioniert wie ein Charme. In meiner geladenen Skripten index.module.js ist:

// 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... 

Um zu sehen, was ich geändert habe ich und gulp serve

Irgendwelche Ideen neu starten zu stoppen?

Answer 1

Hatte ein ähnliches Problem mit ziemlich den gleichen Werkzeugen. Benutzte Gulp, um das WebPack-Projekt zu kompilieren, mit 'awesome-typescript-loader' und 'webpack-dev-server'. Es stellte sich heraus, dass etwas mit meinem "publicPath" nicht stimmte - ich dachte, es sollte "/ js /" sein, aber wenn der Dev-Server aktualisiert wurde, kam keine der Änderungen zustande. Ich versuchte stattdessen, 'ts-loader' zu verwenden, aber es passierte dasselbe. Um es herum mein Verwenden des "js" Verzeichnis-Namens in "Dateiname", so sah meine Ausgabe so aus.

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

und es war in meinem HTML-ähnlich

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

hoffte, das hilft jemand verwiesen. Hielt mich für ein paar Stunden auf!