How can I load angularjs 1.* ngRoute with webpack 4.*? - angularjs

Question

I am trying to set up a basic angularjs + webpack project. I can get it running well as long as i stick to angularjs alone (ngApp = angular.module('ngApp), [])). Whenever I try to take the step to add some angular extension (ngApp = angular.module('ngApp), ['ngRoute']) something just doesn't work. I'm fairly certain the problem is with the loading of the library. I don't want to use bower, i want to use Webpack to run it.
webpack.config.js:
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Webpack Starter App',
template: './src/templates/index.html'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.js$/,
use: [
'angular-router-loader',
'babel-loader'
]
/* These 2 js loaders were failed attempts at solving this problem*/
}
]
}
};
ngApp.js
import * as angular from 'angular';
import ngRoute from'angular-route';
import './ngApp.controller.root.js';
const ngApp = angular.module('ngApp', [ngRoute]);
ngApp.config(function($routeProvider){
$routeProvider.when('/', {
controller: 'ngAppRootController',
templateUrl: './ngApp.view.root.html'
}).otherwise({
redirectTo: '/'
});
});
ngApp.$inject = [ngRoute];
webconsle error:
angular.js:138 Uncaught Error: [$injector:modulerr] Failed to instantiate module ngApp due to:
Error: [$injector:unpr] Unknown provider: t

Answer 1

If you see error like 'Unknown provider' with random letter like 'e'/'t'/'x', means you need ngInject plugin to let Webpack know which dependency to inject.
Add 'ngInject' right on next line after any dependency injection in Angular file:
ngApp.config(function($routeProvider, serviceWhateverYouRequire) {
'ngInject'
$routeProvider.when('/', { bla-bla-bla
or
ngApp.config(['$routeProvider', 'serviceWhateverYouRequire', function($routeProvider, serviceWhateverYouRequire) {
$routeProvider.when('/', { bla-bla-bla
We use these libraries for devDependencies with webpack#4.12.0
"ng-annotate-loader": "0.1.0",
"ng-annotate-webpack-plugin": "^0.3.0",
"ts-ng-annotate-loader": "^0.2.1"