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

Question

このアプリはyeomangulp-angularジェネレータでスキャフォールドされています。 ウェブパックは、モジュール管理用です。コードはタイプスクリプトで、awesome-typescript-loaderで翻訳されています。 私は私のローカルWebサーバを起動するgulp serveを実行し、すべてが右に行く：

[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 

（エラーはTSコードのバグによって引き起こされる、私の問題とは何の関係も...）

のは、今私が言ってみましょう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); 
} 

空白のままにします。ここでのWebPACKが何をするかです：

[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 

ゴー変更され、私のブラウザと何に見て、すべてが魔法のように動作します。私のロードされたスクリプトであるindex.module.js：

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

私はgulp serve

任意のアイデアを停止して再起動する必要が変更内容を確認するためには？

Answer 1

ほとんど同じツールで同様の問題がありました。 'awesome-typescript-loader'と 'webpack-dev-server'を使ってGulpを使ってWebPackプロジェクトをコンパイルしていました。私の「パブリックパス」には何か問題があったことが分かりました。「/ js /」を意図していると思っていましたが、devサーバがリフレッシュされるたびに変更はありませんでした。代わりに 'ts-loader'を使って試しましたが、同じことが起こりました。私の出力はこのように見えたので、 "ファイル名"に "js"というディレクトリ名を使用しています。

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

、それがこの

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

ように私のHTMLの中で参照されたが、これは誰かに役立ちます願っています。私を数時間飼っていた！