AngularJS with Webpack - minified assets causing issues with CSS

Question

I recently moved Angular project to Webpack build system. After struggling with Angular Dependency Injection issues in JS source code, now that JS errors start occurring in CSS files. And I am totally confused why JS errors are targeting to a CSS file.

The error says;

Uncaught Error: [$injector:unpr] Unknown provider: eProvider <- e

And it occurs on every css file which is tarting with /*!. Also Same error start occurring on different css styles. e.g.

Can someone guide me how such JS injector errors occurring in CSS files?

My webpack config for CSS files are;

  {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract({
      use: [
        { loader: 'css-loader',
          options: {
            modules: false,
            sourceMap: true}
        }}
      ],
      fallback: 'style-loader'
    })
  },

I a requiring all css files together in entry file by;

function requireAll(requireContext) {
  return requireContext.keys().map(requireContext);
}

requireAll(require.context('./../assets/css/', true, /\.css$/));

Can someone guide what's wrong in above config.

Update:

I solved first error on comments of the files by adding minimize: { discardComments: { removeAll: true } into css-loader options. But second issue in styles still persist.

The error is definitely not coming from CSS. You are probably seeing it in CSS because something went wrong with the source map creation. — Umur Kontacı
– Umur Kontacı, Commented Aug 24, 2017 at 0:49
But if I remove that css line error do not appear in that css file again. That leads me to believe it’s really in css file. — Nazar Hussain
– Nazar Hussain, Commented Aug 24, 2017 at 0:51

Nazar Hussain · Accepted Answer · 2017-08-24 10:42:23Z

3

Finally found that if you minify AngularJS code with webpack you have incorporate a plugin to solve DI issues.

yarn add -D babel-plugin-angularjs-annotate

And then by adding it into babel plugins;

{
    test: /\.js$/,
    exclude: /(node_modules|bower_components|assets)/,
    use: {
      loader: 'babel-loader?name=js/[hash].[ext]',
      options: {
        presets: ['env'],
        plugins: ['transform-runtime', 'angularjs-annotate']
      }
    }
  }

That solves the issue.

answered Aug 24, 2017 at 10:42

Nazar Hussain

5,1826 gold badges43 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS with Webpack - minified assets causing issues with CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related