Cannot GET angular5 app on refresh with webpack

Question

I'm building an angular5 app and I've introduced the HtmlWebpackPlugin which is causing the cannot get issue on reload.

Here are my webpack configs

webpack.base.config.js

const webpack = require("webpack");

module.exports = { 
  entry: {
    app: "./scripts/app/index",
    style: "./scripts/style/index"
  },

  plugins:[
    new webpack.optimize.CommonsChunkPlugin("shared"),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Popper: "popper.js"
    })
  ],

  module:{
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.html?$/, exclude: /node_modules/, use: ["raw-loader"]},
      { test: /^(?!.*component).*\.scss$/, exclude: [/node_modules/], use: ["style-loader", "css-loader", "sass-loader"] },
      { test: /\.component\.scss$/, exclude: [/node_modules/], use: ["raw-loader", "resolve-url-loader", "sass-loader"] },
      { test: /\.tsx?$/, exclude: /node_modules/, use: "awesome-typescript-loader?silent=true" },
      { test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: ["url-loader?limit=10000&mimetype=application/font-woff"] },
      { test: /\.(png|gif|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: ["file-loader"] }
    ]
  },

  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"]
  }
}

webpack.dev.config.js

const baseConfig = require("./webpack.base.config");
const htmlWebpackPlugin = require('html-webpack-plugin');
const merge = require("webpack-merge");
const webpack = require("webpack");
const path = require("path");

module.exports = merge(baseConfig, {
  watch: true,
  devtool: "inline-source-map",

  devServer: {
    port: 7777,
    historyApiFallback: {
      index: "index.html"
    }
  },

  output:{
    path: path.resolve("./"),
    publicPath: "/",
    filename: "[name]-bundle.js"
  },

  plugins: [
    new htmlWebpackPlugin({
      filename: 'index.html',
      inject: 'body',
      hash: true,
      template: './index.template.html'
    }),
    new webpack.DefinePlugin({
      API: JSON.stringify("http://myapi.dev/")
    })
  ]
});

I can get it to work perfectly provided I don't use the HtmlWebpackPlugin but I want to utilize the file hashing. Any help on this would be greatly appreciated!

Z

Answer 1

The answer was painfully simple. I had to replace the devServer in webpack.dev.config.js to the following

devServer: {
    port: 7777,
    historyApiFallback: true
  },

This worked when running locally but when deploying to azure I needed the below web.config

<configuration>
<system.webServer>
    <rewrite>
      <rules>
        <rule name="Main Rule" 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>