webpack生产的angular2无法使用URL导航

Question

我有一个使用angular2路由的angular2应用程序，webpack配置的dev和prod版本如此tutorial中所述。

当我使用开发选项，运行npm start，一切工作正常，导航与网站上的链接或具有完整的URL像http://localhost:3000/dashboard。 但是，当我使用prod选项，运行npm run build并将dist-folder输出部署到我的iis时，我不能再使用URL进行导航，我必须先到http:/MyIp:3000/，然后从那里我只能使用网站上的链接进行导航。任何尝试使用URL导航都会导致404错误。

另外，在prod模式下，当我刷新页面时，我得到一个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，我甚至无法让开发工作（关于您的问题）。通过单击链接在应用中导航很好，但是F5或直接击中深层链接不起作用。我们在IIS中的以下URL重写规则（创建一个web.config，如果你没有一个已经，并将其添加到根文件夹）解决了这个问题：

<?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> 

我不知道是否它推荐或不要在prod中使用，但这是内部托管的，现在可以使用。