web2のangular2の生成はURLでナビゲートできません

Question

私はangular2経路を使用するangular2アプリケーションを持っています。このwebpack構成のdevとprodのバージョンはこのtutorialで説明されています。

npm startを実行しているdevオプションを使用すると、すべてが正常に動作し、リンクはサイトのリンクまたはフルURLのhttp://localhost:3000/dashboardのいずれかで動作します。 しかし、私がprodオプションを使用してnpm run buildを実行し、distフォルダの出力を私のiisに配備すると、私はもはやURLをナビゲートすることができません。まずhttp:/MyIp:3000/に行き、そこから私はサイト上のリンク。 URLでナビゲートしようとすると、404エラーが発生します。

さらに、プロードモードでは、ページをリフレッシュするときに404エラーが返されます。

誰でもこのエラーが発生しましたか？誰かがそれらを解決する方法についてのアイデアを持っていますか？

UPDATE

多分誰かが私が見落としてエラーを発見しますwebpack.common.jsためとwebpack.prod.jsのための私のコードを追加しています...

マイwebpack.common。 JS

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/app/main.ts' 
    }, 

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

    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' 
    }) 
    ] 
}; 

マイwebpack.prod.js

var webpack = require('webpack'); 
var webpackMerge = require('webpack-merge'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var commonConfig = require('./webpack.common.js'); 
var helpers = require('./helpers'); 

const ENV = process.env.NODE_ENV = process.env.ENV = 'production'; 

module.exports = webpackMerge(commonConfig, { 
    devtool: 'source-map', 

    output: { 
    path: helpers.root('dist'), 
    publicPath: '/', 
    filename: '[name].[hash].js', 
    chunkFilename: '[id].[hash].chunk.js' 
    }, 
    htmlLoader: { 
    minimize: false // workaround for ng2 
    }, 

    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618 
     mangle: { 
     keep_fnames: true 
     } 
    }), 
    new ExtractTextPlugin('[name].[hash].css'), 
    new webpack.DefinePlugin({ 
     'process.env': { 
     'ENV': JSON.stringify(ENV) 
     } 
    }) 
    ] 
}); 

Answer 1

私たちはangular-cliを使用していますが、私はdevビルドを（あなたの問題に関して）動作させることさえできませんでした。リンクをクリックしてアプリをナビゲートするのは問題ありませんでしたが、F5や深いリンクを直接押すと機能しませんでした。私はそれをお勧めしますかわからないんだけど

<?xml version="1.0" encoding="UTF-8"?> 
<configuration> 
    <system.webServer> 
    <rewrite> 
     <rules> 
     <rule name="Angular Routes" stopProcessing="true"> 
      <match url=".*" /> 
      <conditions logicalGrouping="MatchAll"> 
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
      </conditions> 
      <action type="Rewrite" url="/" /> 
     </rule> 
     </rules> 
    </rewrite> 
    </system.webServer> 
</configuration> 

か：私たちは（あなたが既に持っているし、ルートフォルダに追加していない場合は、web.configファイルを作成）IISで以下のURL書き換えルールでそれを解決しましたprodで使用するのではなく、これは内部的にホストされており、今のところ動作します。