title: Angularjs 1.7.7 + webpack - only prod build shows injector module error. How to fix it?
body: <p>I am working on moving to webpack for my angularjs (1.7.7) app.</p>
  
  <p>webpack.config.js -</p>
  
  <pre><code>const webpack = require('webpack');
  const path = require('path');
  const HtmlWebpackPlugin = require("html-webpack-plugin"); // Require  html-webpack-plugin plugin
  const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
  const CopyPlugin = require('copy-webpack-plugin');
  const ImageminPlugin = require('imagemin-webpack-plugin').default;
  
  module.exports = {
    entry: {
      main: './src/app/index.js'
    }, // __dirname + "/src/app/index.js", // webpack entry point. Module to start building dependency graph
    output: {
      path: path.resolve(__dirname, 'dist'), // Folder to store generated bundle
      filename: "bundle.js", // Name of generated bundle after build
      publicPath: "/" // public URL of the output directory when referenced in a browser
    },
    module: {
      // where we defined file patterns and their loaders
      rules: [
        { test: /\.js$/, use: "babel-loader",
          exclude: /node_modules/ },
        { test: /\.html/, loader: "raw-loader" },
        { test: /\.(sass|scss|css)$/, use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']},
        { test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          use: [{
              loader: 'file-loader',
              options: {
                  name: '[name].[ext]',
                  outputPath: 'fonts/'
              }
          }]
        }
      ]
    },
    plugins: [
      // Array of plugins to apply to build chunk
      new HtmlWebpackPlugin({
        template: __dirname + "/src/public/index.html",
        inject: "body"
      }),
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "style.css",
        chunkFilename: "[id].css"
      }),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery',
        THREE: 'three',
        'THREE': 'three',
        UIkit: 'uikit',
        'UIkit': 'uikit'
      }),
      new CopyPlugin([{ // Copy the images folder
        from: 'src/public/images/',
        to: 'images/'
      },
      { // copy the html templates
        from: 'src/app/templates/',
        to: 'templates/'
      }]),
      new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }) // optimize all the images
    ],
    devServer: {
      // configuration for webpack-dev-server
      contentBase: "./src/public", //source of static assets
      port: 7600 // port to run dev-server
    },
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: true // set to true if you want JS source maps
        }),
        new OptimizeCSSAssetsPlugin({})
      ],
      splitChunks: {
        chunks: 'all'
      }
    }
  };
  </code></pre>
  
  <p>index.js -</p>
  
  <pre><code>    /**
   * Application stating point.
   */
  const angular = require("angular");
  
  let app = angular.module("app", [require('angular-touch'), require('angular-route')]);
  app.config(function($routeProvider, $locationProvider) {
  $routeProvider
  .when("/", {
    template: require("./templates/home.html")
  })
  .when("/contact", {
    template: require("./templates/contact.html")
  })
  .otherwise({
    redirectTo: "/"
  });
  $locationProvider.html5Mode(true);
  });
  
  // app.controller.....
  </code></pre>
  
  <p>Now, this works perfectly fine with webpack-dev-server in dev mode. But when I build it and run the app from the dist folder, it gives the following error.
  Since this is minified, I am only guessing that it is the ngRoute that it is not injecting. I have run the webpack command for prod mode with the '--verbose' and there is no angular-route mentioned anywhere. </p>
  
  <blockquote>
    <p>Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
    Error: [$injector:unpr] Unknown provider: t</p>
    
    <p><a href="https://errors.angularjs.org/1.7.7/" rel="nofollow noreferrer">https://errors.angularjs.org/1.7.7/</a>$injector/modulerr?p0=app&amp;p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20t%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.7.7%2F%24injector%2Funpr%3Fp0%3Dt%0A%20%20%20%20at%20http%3A%2F%2Fsyntech-009%3A8000%2F1.bundle.js%3A50%3A836%0A%20%20%20%20at%20http%3A%2F%2Fsyntech-009%3A8000%2F1.bundle.js%3A50%3A24010%0A%20%20%20%20at%20c%20(http%3A%2F%2Fsyntech-009%3A8000%2F1.bundle.js%3A50%3A25600)%0A%20%20%20%20at%20o%20(http%3A%2F%2Fsyntech-009%3A8000%2F1.bundle.js%3A50%3A25905)%0A%20%20%20%20at%20Object.invoke%20(http%3A%2F%2Fsyntech-009%3A8000%2F1.bundle.js%3A50%3A25993)%0A%20%20%20%20at%20t%20(http%3A%2F%2Fsyntech-009%3A8000%2F1.bundle.js%3A50%3A25390)%0A%20%20%20%20at%20http%3A%2F%2Fsyntech-009%3A8000%2F1.bundle.js%3A50%3A25012%0A%20%20%20%20at%20vt%20(http%3A%2F%2Fsyntech-009%3A8000%2F1.bundle.js%3A50%3A1557)%0A%20%20%20%20at%20m%20(http%3A%2F%2Fsyntech-009%3A8000%2F1.bundle.js%3A50%3A24871)%0A%20%20%20%20at%20Ze%20(http%3A%2F%2Fsyntech-009%3A8000%2F1.bundle.js%3A50%3A24207)
        at 1.bundle.js:50
        at 1.bundle.js:50
        at vt (1.bundle.js:50)
        at m (1.bundle.js:50)
        at Ze (1.bundle.js:50)
        at e (1.bundle.js:50)
        at nt (1.bundle.js:50)
        at et (1.bundle.js:50)
        at HTMLDocument. (1.bundle.js:50)
        at t (1.bundle.js:39)</p>
  </blockquote>
  
  <p>So far I have tried including the route and touch using require, es6 import syntax and the one shown here. All syntaxes work in dev mode but build doesn't inject it right. I am thinking that I am missing something in the webpack. Any pointers?</p>
  
  <p>Update - since posting this, also tried adding ng-strict-di directive. Even this doesn't make the error show up in dev mode and the prod mode error remains.</p>