webpack.ProvidePlugin angular

Question

I am trying to use angular NG6 starter. in its source code, import angular from angular is written almost every js file. So I try this:

 new webpack.ProvidePlugin({
      // $: "jquery",
      // jQuery: "jquery",
      // "window.jQuery": "jquery",
      'angular': 'angular',
    }),

But it can not work. I dont know why, and how to solve this issue.

Answer 1

Here the solution to the first error message in your screenshot "angular.module is not a function": Angular 1 is not working nicely with webpack without a shim (see https://github.com/webpack/webpack/issues/2049 ). Try this webpack loader config:

module: {
    loaders: [
        /*
         * Necessary to be able to use angular 1 with webpack as explained in https://github.com/webpack/webpack/issues/2049
         */
        {
            test: require.resolve('angular'),
            loader: 'exports?window.angular'
        },
    ]
},
plugins: [
    new webpack.ProvidePlugin({
        'angular': 'angular',
    }),
],

This should initialize the angular object properly instead of the default action of setting it to an empty object (which does not have a property named module).

Answer 2

U need to use sth like this: var app = angular.module('RequiredName', ['ui.router','ui.bootstrap']);

and use this on app file and call your app module like in the parts of project that u are going to use any function or method implemented in your app.js file in app.factory or app.controller or...