Error: Can't resolve 'angular-ui-bootstrap' with webpack-4

Question

Angular-ui-bootstap import issue in angularJS code using ECMA 6 and webpack-4

**Below is my angular.js & angular-ui-bootstrap versions **

"angular": "1.5.3", "angular-ui-bootstrap": "^0.12.1",

Below is my webpack config file:

module.exports = {
  mode: "development",
  entry: {
    app: "./src/app/modules/index.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"]
      },
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      },
      {
        test: /\.html$/,
        use: [
          { 
            loader: "html-loader",
            options: {
              attributes: true,
              interpolate: true,
            }
          }
        ],
      }
    ]
  },
  devtool: "inline-source-map",
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/app/index.html",
      inject: true,
      appMountId: "app",
      filename: "index.html"
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  }
};

To import angular-ui-bootstrap in app.js:

import angular from 'angular';
import uirouter from 'angular-ui-router'
import uibootstrap from 'angular-ui-bootstrap'

export default angular.module('App', [uirouter, uibootstrap ]).name;

I am getting following error:

ERROR in ./src/app/modules/core/index.js Module not found: Error: Can't resolve 'angular-ui-bootstrap'

And webpack build going failed. I have also tried with directly ui-bootstrap import in my html but its not working

Answer 1

I think you need to upgrade your angular-ui-bootstrap version Refer: https://github.com/angular-ui/bootstrap

Angular Requirements

UI Bootstrap 1.0 and higher requires Angular 1.4.x or higher and it has been tested with Angular 1.4.8.