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

Question

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

当我使用dev选项运行npm start ，一切运行正常，并且可以使用站点上的链接或完整的URL（例如http://localhost:3000/dashboard进行导航。 但是，当我使用prod选项时，运行npm run build并将dist-folder输出部署到我的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，我什至无法使开发工作正常进行（关于您的问题）。 通过单击链接在应用程序中导航很好，但是直接按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>

我不确定是否建议在产品中使用它，但这是内部托管的，现在可以使用。