angular - angular2 的 webpack 生产无法使用 URL 进行导航

Question

我有一个使用 Angular2 路由的 Angular2 应用程序，Webpack 配置的开发版本和产品版本如 tutorial 中所述。 .

当我使用 dev 选项并运行 npm start 时，一切正常，导航可以使用站点上的链接或使用完整的 URL，例如 http://localhost:3000/dashboard。 但是，当我使用 prod 选项、运行 npm run build 并将 dist-folder 输出部署到我的 iis 时，我无法再使用 URL 进行导航，我必须首先转到 http:/MyIp:3000/ 从那里我只能使用网站上的链接进行导航。任何使用 URL 进行导航的尝试都会导致 404 错误。

此外，在产品模式下，每当我刷新页面时，我都会收到 404 错误。

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

更新

添加我的 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，则创建一个 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>

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