Angularjs 1.7.7 + webpack - 只有 prod 构建显示注入器模块错误。如何解决？

Question

我正在为我的 angularjs (1.7.7) 应用程序迁移到 webpack。

webpack.config.js -

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'
    }
  }
};

index.js -

    /**
 * 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.....

现在，这在开发模式下与 webpack-dev-server 完美配合。但是当我构建它并从 dist 文件夹运行应用程序时，它会出现以下错误。 由于这是缩小的，我只是猜测它没有注入的是 ngRoute。我已经使用“--verbose”为 prod 模式运行 webpack 命令，并且在任何地方都没有提到 angular-route。

未捕获的错误：[$injector:modulerr] 无法实例化模块应用程序，原因是： 错误：[$injector:unpr] 未知提供者：t

https://errors.angularjs.org/1.7.7/$injector/modulerr?p0=app&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) 在 1.bundle.js:50 在 1.bundle.js:50 在 vt (1.bundle.js:50) 在 m (1.bundle.js:50) 在泽 (1.bundle.js:50) 在 e (1.bundle.js:50) 在 nt (1.bundle.js:50) 在等（1.bundle.js:50） 在 HTML 文档。 (1.bundle.js:50) 在 t (1.bundle.js:39)

到目前为止，我已经尝试使用 require、es6 导入语法和此处显示的语法来包含路由和触摸。所有语法都在开发模式下工作，但构建并没有正确注入它。我在想我在 webpack 中遗漏了一些东西。有什么指点吗？

更新 - 自发布此消息以来，还尝试添加 ng-strict-di 指令。即使这不会使错误出现在开发模式中，并且产品模式错误仍然存​​在。

Answer 1

function($routeProvider) {}

将被缩小到~

function(a) {}

所以你需要以下之一：

1. 使用完整的符号['$routeProvider', function($routeProvider) {}]
2. 使用$inject = ['$routeProvider'] 的完整符号
3. 使用一些 angularjs-annotate 插件