爲什麼Webpack不會複製我的ng2模板文件？

這裏是我（簡化）角2 app文件夾stucture：爲什麼Webpack不會複製我的ng2模板文件？

這裏是我的webpack.config.js：

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: { 
     'polyfills': './polyfills.ts', 
     'vendor': './vendor.ts',   
     'app': './app/main.ts'}, 
    output: { 
     path: './dist', 
     filename: '[name].js', 
     chunkFilename: "[id].bundle.js", 
     sourcemapFilename: '[name].map' 
    }, 
    module: { 
     loaders: [ 
      {test: /\.ts$/, loaders: ['ts', 'angular2-template-loader']}, 
      { 
      test: /\.html$/, 
      loader: 'html' 
      }, 
      { 
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
      loader: 'file?name=assets/[name].[hash].[ext]' 
      }, 
      ,{ test: /\.css$/, loaders: 'style!css' } 
     ] 
    }, 
    resolve: { 
     extensions: ['', '.js', '.ts'] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: ['app', 'vendor', 'polyfills'] 
      }),  
     new HtmlWebpackPlugin({ 
      template: './index.html' 
     }) 
    ] 
}

當我執行的WebPack構建，DIST文件夾僅獲取index.html，app.js，polyfills.js和vendor.js。 app.component.html，css和用戶組件html文件不會被複制到dist文件夾中（在各個文件夾，應用程序，應用程序/用戶...中）。

我缺少什麼？

編輯：

這是它的外觀，從開發工具：

來源

2016-08-01 Bogac

它看起來像你的templateUrl沒有被遵守。你可以請你分享你的組件代碼 –

'@Component（{'app/app.component.css']，'app/app.component.css'，'my app'， templateUrl：'app/app.component.html'， '@Component '這就是它的定義，它與System.js一起工作，在webpack中失敗。 – Bogac

你的代碼是否在github上？在你的webpack中['ts'，'angular2-template-loader']不應該是['ts -loader'，'angular2-template-loader'] –

-1

我已經無法管理轉換我的應用程序，並使其以這種方式工作，所以我按照Angular Docs Webpack: an introduction中描述的步驟創建了一個乾淨的項目，然後逐個將其複製到我的組件中，檢查構建時發生的錯誤，主要是錯誤的路徑位置，然後更正它們。它似乎工作到目前爲止。

來源

2016-08-02 19:18:14 Bogac

@JorawarSingh我提出這個問題後的一天過去了，在那段時間裏，我已經解決了我的問題，無論您是否喜歡我的方法，並且我已經分享了它。此外，我還對可能的錯誤原因進行了觀察，並分享了這些信息，所有這些都在上面寫出。 – Bogac

是的，我明白，一天過去了，但仍然會有其他人看着你的帖子找到相同的答案，所以最好給出詳細解釋的答案。正如你問你的問題，「app.component.html，css和用戶組件html文件不復制」。我只是想貢獻，讓其他人可以理解發生了什麼，謝謝！ –

這是它是如何工作的。插件angular2模板加載器查找templateUrl和組件

從

templateUrl; 'path'

轉換路徑

`require("templatePath")`

什麼的WebPack理解和建立它與組件bundle.js。您可以看到您的構建和尋找這樣的事情

template: __webpack_require__(id).

它不會爲你創建獨立的HTML文件它捆綁於一身，併爲您的請求。作爲您的WebPack那裏將是唯一app.js，pollyfills.js，vendor.js和index.html

這裏是充滿例如成分的它的外觀

@Component({ 
    templateUrl: "./home.template.html", 
})

，並在您的WebPack

{test: /\.ts$/, loaders: ["ts-loader","angular2-template-loader"]},

來源

2016-08-02 20:13:28

檢查添加的截圖到我上面的最初問題。 angular2-template-loader可能會以你說的方式工作，但我的問題可能隱藏在我的webpack.config.js中的其他地方，因爲我在完整的URL上獲取404，而不是在ID上。 – Bogac

看看你的bundle是否被編譯過，它應該是'require（「templatePath」）' –

爲什麼Webpack不會複製我的ng2模板文件？

回答

相關問題