Social Items

Showing posts with label Angular. Show all posts
Showing posts with label Angular. Show all posts

I'M using Browser Sync with webpack-dev-server, And facing the issue while using browser sync..!! only form fill up is working, click, scroll is not working in browser sync, and there is no any compile time error occurring, But above things are not working..!! Here is my "Webpack.dev.js" file, So what is wrong over here..?

const helpers = require('./helpers');
const buildUtils = require('./build-utils');
const webpackMerge = require('webpack-merge'); 
const commonConfig = require('./webpack.common.js');

const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const EvalSourceMapDevToolPlugin = require('webpack/lib/EvalSourceMapDevToolPlugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = function (options) {
  const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
  const HOST = process.env.HOST || 'localhost';
  const PORT = process.env.PORT || 3000;

  const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, {
    host: HOST,
    port: PORT,
    ENV: ENV,
    HMR: helpers.hasProcessFlag('hot'),
    PUBLIC: process.env.PUBLIC_DEV || HOST + ':' + PORT

  return webpackMerge(commonConfig({ env: ENV, metadata: METADATA  }), {

    output: {

      path: helpers.root('dist'),

      filename: '[name].bundle.js',

      sourceMapFilename: '[file].map',

      chunkFilename: '[id].chunk.js',

      library: 'ac_[name]',
      libraryTarget: 'var',

    module: {

      rules: [

          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
          include: [helpers.root('src', 'styles')]

          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader'],
          include: [helpers.root('src', 'styles')]



    plugins: [
      new EvalSourceMapDevToolPlugin({
        moduleFilenameTemplate: '[resource-path]',
        sourceRoot: 'webpack:///'

      new NamedModulesPlugin(),

      new LoaderOptionsPlugin({
        debug: true,
        options: { }

      new BrowserSyncPlugin({
        // browse to http://localhost:3000/ during development,
        host: 'localhost',
        port: 4000,
        proxy: 'http://localhost:3000'
        reload: false

    devServer: {
      port: METADATA.port,
      host: METADATA.host,
      hot: METADATA.HMR,
      public: METADATA.PUBLIC,
      historyApiFallback: true,
      watchOptions: {

        ignored: /node_modules/

      setup: function(app) {
        // For example, to define custom handlers for some paths:
        // app.get('/some/path', function(req, res) {
        //   res.json({ custom: 'response' });
        // });

    node: {
      global: true,
      crypto: 'empty',
      process: true,
      module: false,
      clearImmediate: false,
      setImmediate: false,
      fs: 'empty'



I had the exact same issue because I was defining 'io' twice. Double check where you are defining io in your code and ensure you are not defining the variable io twice.

Example of what I was doing wrong:

var server = require('http').createServer(app);
var io = require('socket.io')(server);

var io = require('socket.io').listen(server.listen(config.port, config.ip, function () {
    console.log('Express server listening on %d, in %s mode', config.port,     

Example of what fixed the issue:

var server = require('http').createServer(app);
var io = require('socket.io')(server);

server.listen(config.port, config.ip, function () {
    console.log('Express server listening on %d, in %s mode', config.port, 

WebSocket connection to 'ws://localhost:4000/sockjs-node/612/2pdjfv15/websocket' failed: Connection closed before receiving a handshake response error

I am gonna be very brief.

I have an Angular project with simple navigation menu (routerLinks). Everything work as it is supposed to if it is on localhost, powered by angular cli.

But when I deploy it on a real server (i don't have any VPS or any other server, just folder where I can put my files) weird thing starts happening.

The app is functional, navigation is functional, routeLinks routing, but when I refresh a browser or try to write something manually into URL line, every time I get 404 Not found. (so i am in [domain]/home - everything is ok, but when i refresh browser, i got 404 /home not found.

Maybe I am looking for a problem in a bad place and it is not a problem of angular but about HTTP requests (i don't know much about it).

Do you have any idea where I should start?

Solution :

For Apache HTTP server:

i created .htaccess file and put it into root folder on a provider side.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
For IIS server:

Follow this link to fix this issue Angular 2 Hosted on IIS: HTTP Error 404 or just

Step 1: Install IIS URL Rewrite Module

Step 2: Add a rewrite rule to web.config

<?xml version="1.0" encoding="utf-8"?>
            <rule name="AngularJS Routes" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />   
              <action type="Rewrite" url="/" />

Angular - The requested URL /home was not found on this server