webpackを使用してangular2 + systemjsプロジェクトを構築する404 templates error

Question

Webpackを設定して（少なくとも今のところ）プロジェクトを構築したいと思っていますが、その間にsystemjsが機能しています（このプロジェクトの開発はsystemjs ）。

今、私は私のプロジェクトでのWebPACKを挿入する3日前に試してみました、私は基本的に私はcommonjsにtsconfig.jsonを切り替えhttps://angular.io/docs/ts/latest/guide/webpack.html

（WebPACKのコンフィグについては何も触れていない）私はここで見つけるすべてのものを使用します私はを起動しました。npmを実行してコマンドを実行し、dist/index.htmlを完全に互換性を持たせるように修正しました（いくつかのオリジナルのsystemjsを削除しました）。 何があっても、私は404エラーでいっぱいです。zone.jsは私のコンポーネントのテンプレートを見つけることができませんが、彼が望むところにあるすべてのテンプレートを移動すれば、完全に動作します。

私はこのことを検索しました。必要なテンプレートを取得する必要がありますが、angular2-template-loaderがそこにあるのですか？これを解決するにはどうすればよいですか？

これは（webpack.common.jsとして角度ガイドで命名）の主WebPACKの設定です：

助けを願い

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var helpers = require('./helpers'); 

module.exports = { 
    entry: { 
    'polyfills': './src/polyfills.ts', 
    'vendor': './src/vendor.ts', 
    'app': './src/main.ts' 
    }, 

    resolve: { 
    extensions: ['', '.js', '.ts'] 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loaders: ['awesome-typescript-loader', '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$/, 
     exclude: helpers.root('src', 'app'), 
     loader: ExtractTextPlugin.extract('style', 'css?sourceMap') 
     }, 
     { 
     test: /\.css$/, 
     include: helpers.root('src', 'app'), 
     loader: 'raw' 
     } 
    ] 
    }, 

    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: ['app', 'vendor', 'polyfills'] 
    }), 

    new HtmlWebpackPlugin({ 
     template: 'src/index.html' 
    }) 
    ] 
}; 

、ありがとうございました。

Answer 1

私は同じ問題を抱えています。一時的な解決策として、copy-webpack-pluginを使用して、cssファイルとhtmlファイルをコピーしています。 package.jsonファイルで、これはdevDependenciesにCopyWebpackPluginを追加行うに

：あなたのwebpack.common.jsファイルに次に

"copy-webpack-plugin": "^2.1.3", 

はがで文を必要と追加しますトップ：

var CopyWebpackPlugin = require('copy-webpack-plugin'); 

次に、お客様のプラグインは、あなたのwebpack.common.jsファイルのセクション：

plugins: [ 
    new CopyWebpackPlugin([ 
     { from: 'src/*.html', to: './' } 
    ]), 
    new CopyWebpackPlugin([ 
     { from: 'src/*.css', to: './' } 
    ]) 
]