Webpack with angular route configuration - browser has valid config, cant resolve file

Question

I am having big problems with webpack config, after I added angular route. AngularJS(1).

My error:

Ofc If its not clear screen I'll rewrite it.

My package.json config:

{
  "name": "webpack1",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "prod": "npm run clean && set NODE_ENV=production && webpack -p",
    "clean": "rimraf ./dist/*"
  },

app.js:

const css = require('./app.scss');
var angular = require('angular');
var ngRoute = require('angular-route');

var ngModule = angular.module('app', ['ngRoute']);

ngModule.config(function($routeProvider){
    $routeProvider

    .when('/', {
        template: require('./html/index.html')
    })

    .when('/program', {
        templateUrl: './html/program.html'
    })
 });

webpack.config.js:

const ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var path = require("path");
var bootstrapEntryPoints = require('./webpack.bootstrap.config');

var isProd = process.env.NODE_ENV === 'production';
var cssDev = ['style-loader', 'css-loader', 'sass-loader'];
var cssProd = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader'],
    allChunks: true
})
var cssConfig = isProd ? cssProd : cssDev;

    var bootstrapConfig = isProd ? bootstrapEntryPoints.prod : bootstrapEntryPoints.dev;


module.exports = {
    stats:{
        colors: true,
        modules: true,
        reasons: true,
        errorDetails: true
    },
    entry: {
        app: './src/js/app.js',
        contact: './src/js/contact.js',
        register: './src/js/register.js',
        login: './src/js/login.js',
        program: './src/js/program.js',
        adminNetworks: './src/js/adminNetworks.js',
        automatic: './src/js/automatic.js',
        bootstrap: bootstrapConfig
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: '[name].bundle.js'
    },

After that, just added HtmlWebpackPlugin, ExtractTextPlugin, rules of module and devServer config.

I don't know what to change.. it looks like I added wrong path, but got confused, I tried every combination which i read.

Please help

Answer 1

Wow, finally it works.

Firstly, I moved app.js into main folder to avoid bad pathing. Secondly, My path in url was bad because of auto-added hashes, for example: (/#!#program). To avoid that, I had to change my config code:

ngModule.config(function($routeProvider, $locationProvider){
    $locationProvider.hashPrefix('');
    $routeProvider

    .when('/', {
        templateUrl: 'index.html'
    })
    .when('/program', {
        templateUrl: 'program.html'
    })
});

I've got still the

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

issue, but routing works so it's okay I guess..

Hope that will help someone :)