Webpack + Angular2 publicPathが間違っていますか？

私は2 + WebPACKの作業をアンギュラ取得しようとしています - と私はほとんど存在しています:)Webpack + Angular2 publicPathが間違っていますか？

私は解決する必要がある最後の問題は、次のとおりです。

子ルートを閲覧する（例えば/ childroute /メイン）のすべてルータリンクを使用している限り、意図どおりに動作します。
アドレスを手動で入力するかリロードするときに、間違ったバンドルパスを持つ404が得られます。 localhost：5001/dist/bundle.jsである必要がありますが、webpackはlocalhost：5001/childroute/dist/bundleを取得しようとします。 js。 WebPACKの中で私のpublicPathを変更すると、ここで:(

を動作しませんでした私のWebPACKの設定です：

"use strict"; 
var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
entry: { 
    "app": "./wwwroot/app/base/boot", 
    "vendor": "./wwwroot/app/base/vendors"  
}, 
devtool: 'source-map', 

output: { 
    filename: "bundle.js", 
    chunkFilename: "[id]chunk.js", 
    path: "./wwwroot/dist/", 
    publicPath: "./dist/" 
}, 
//devServer: { 
// contentBase: "./wwwroot/", 
// host: "localhost", 
// port: 50001, 
// inline:true 
//}, 
resolve: { 

    extensions: ['','.js','.ts'] 
}, 
module: { 
    loaders: [ 
     //Typescript 
     { 
      test: /\.ts$/, 
      loader: 'ts-loader', 
      exclude: '/node_modules/' 
     }, 
     // SASS 
     { 
      test: /\.scss$/, 
      loaders: ['style','css','sass'], 
      exclude: '/node_modules/' 
     }, 
     // Fonts & Files 
     { 
      test: /\.(ttf|eot|txt|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, 
      loader: 'file-loader' , 
      exclude: '/node_modules/' 
     } 
    ] 
}, 
plugins: [ 
    //new webpack.optimize.UglifyJsPlugin({ 
    // compressor: { 
    //  warnings: false 
    // } 
    //}), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }), 
    new webpack.optimize.CommonsChunkPlugin("vendor","vendor_bundle.js") 
] 
};

私は誰かが私にヒント:)
みんなありがとうを与えることを願っています！

編集：index.htmlのスクリプトパスを "dist/bundle.js"から "/dist/bundle.js"に変更した場合、スクリプトはロードされますが、角度はテンプレートが見つかりません。テンプレートパスに "/ childroute /"を追加しても同じエラーが発生します。

出典

2016-05-07 Mr. Muh

これらのリクエストはバックエンド（apache、nginx ..）で最初に処理され、バックエンドサーバーはおそらく設定されていないそのような要求を処理する。解決策は、バックエンドが/ childroute/mainへのリクエストに対してindex.htmlを提供するように設定することです。あるいは、すべてのリクエストでindex.htmlを返す方が良いでしょう。

この方法で、/ childroute/mainにアクセスすると、あなたのバックエンドは依然としてあなたの反応するアプリケーションを処理して、ルーティングを処理します。

出典

2016-05-07 18:46:42 hansn

私はすでに働いて、そして（一口から）のWebPACKに私のスイッチの前に、すべてが（これらの子ルートを含む）罰金働いていた...私のテンプレートのURLが」私のバックエンド（asp.netコア）のセットアップを持っていました。/app/... "、なぜangleは"/childroute/app/... "を求めるのですか？私はそれを取得しません:( –

Ok。あなたのスクリプトタグにスラッシュ.html。 – hansn

ありがとう、試してみました（私の編集を参照してください）..スクリプトは今はうまく読み込まれますが、今は私のTemplateUrlsは、自分のURLにChildroute-Partyが追加されています... –

それとも、PathLocationStrategyのようなので、きれいではありませんHashLocationStrategy

bootstrap(MyApp,[..., provide(LocationStrategy, {useClass: HashLocationStrategy})])

を使用することはできますが、サーバーのサポートを必要としません。

出典

2016-05-07 21:17:02 IgorL

baseタグをindex.htmlに追加すると、すべてのリソースが、現在のルートからの相対パスではなく、ベースパスから相対的にロードされます。

<head> 
<base href="/"> 
</head>

出典

2016-05-08 09:22:16 Steffen

ありがとうございますが、私はindex.htmlでその行を持っています –

Webpack + Angular2 publicPathが間違っていますか？

答えて

関連する問題