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命令，并且在任何地方都没有提到角度路由。

未捕获的错误：[$ 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）       在Ze（1.bundle.js：50）       在e（1.bundle.js：50）       在nt（1.bundle.js：50）       在et（1.bundle.js：50）       在HTMLDocument。（1.bundle.js：50）       在t（1.bundle.js：39）

到目前为止，我已经尝试使用require，es6 import语法和此处显示的语法包括路线和触摸。所有语法都可以在开发人员模式下使用，但是build不能正确地将其注入。我以为我在Webpack中缺少了一些东西。有指针吗？

更新-自发布以来，还尝试添加ng-strict-di指令。即使这样也不会使错误在开发人员模式下显示，并且生产模式错误仍然存在。

Answer 1

using(var connection = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConn"].ConnectionString))
try{
    using(var command = connection.CreateCommand())
    {
       command.CommandText = "...";
       connection.Open();
       command.ExecuteNonQuery();
    }
}
catch(Exception ex){ //Log exception according to your own way
    throw;
}
finally{
    command.Dispose();
    connection.Close();
    connection.Dispose();
}

将缩小为〜

function($routeProvider) {}

因此您需要以下之一：

使用完整的符号function(a) {}
对['$routeProvider', function($routeProvider) {}]使用完整的符号
使用一些angularjs注释插件

Angularjs 1.7.7 + Webpack-仅产品生成显示进样器模块错误。如何解决？

1 个答案: