CODEWITHSUNDEEP
angulardeploymentwebpackangular2-routing
Ravid Goldenberg
Ravid Goldenberg

Reputation: 2299

webpack production of angular2 can't navigate with URL

I have an angular2 application that uses angular2 route, the dev and prod version of the webpack configuration are as described in this tutorial.

When I use the dev option, running npm start, everything works fine and the navigation either with links on site or with full URL's like http://localhost:3000/dashboard. But when I use the prod option, running npm run build and deploying the dist-folder output to my iis I can no longer use the URL's to navigate, and I must first go to http:/MyIp:3000/ and from there I can only navigate with the links on site. Any attempt to navigate with the URL leads to a 404 error.

In addition in prod mode when ever I refresh the page I get back a 404 error.

Has anyone encounter this errors? and do anyone has an idea on how to solve them?

UPDATE

Adding my code for webpack.common.js and for webpack.prod.js maybe someone will spot an error I overlooked...

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

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

Upvotes: 2

Views: 679

Answers (1)

John Doe
John Doe

Reputation: 188

We're using angular-cli and I couldn't even get the dev build to work (in regards to your problem). Navigating in the app by clicking links was fine but an F5 or hitting a deep link directly didn't work. We solved it with the following URL Rewrite rule in IIS (create a web.config if you don't have one already and add it to the root folder):

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

I'm not sure whether it's recommended or not to use in prod but this is hosted internally and it works for now.

Upvotes: 3

Related Questions