angular2罐头的网页包装生产'；不能使用URL导航

我有一个使用angular2路由的angular2应用程序，Web包配置的dev和prod版本如本文所述

当我使用dev选项，运行

npm start

时，一切正常，导航要么在站点上有链接，要么像

http://localhost:3000/dashboard

。 但是当我使用prod选项，运行

npm run build

并将dist文件夹输出部署到我的iis时，我不能再使用URL进行导航，我必须首先转到

http:/MyIp:3000/

，从那里我只能使用站点上的链接进行导航。任何使用URL导航的尝试都会导致404错误

此外，在prod模式下，每当我刷新页面时，都会返回404错误

有人遇到过这种错误吗？有人知道如何解决这些问题吗

更新

为webpack.common.js和webpack.prod.js添加我的代码可能有人会发现我忽略的错误

我的webpack.common.js

我的webpack.prod.js

---

我们使用的是angular cli，我甚至无法让开发版本正常工作（关于您的问题）。通过点击链接在应用程序中导航很好，但F5或直接点击深层链接都不起作用。我们在IIS中使用以下URL重写规则解决了此问题（如果您还没有web.config，请创建一个web.config并将其添加到根文件夹）：

---

我不确定是否建议在prod中使用它，但它是内部托管的，目前可以使用。

很酷，请将其标记为答案，以便其他人可以轻松找到，干杯。

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

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

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