4

I want to build a web application and I have started building this by using the angular fullstack generator. This generator uses webpack and this is the first time I am using webpack.

I have been trying to add the ngMaterial dependency by installing it with:

npm install angular-material --save

I have added the dependency in the config.entry.vendor from the webpack.make.js file but when I tried to import the ngMaterial i received the following error:

ERROR in ./client/app/app.js Module not found: Error: Cannot resolve module 'ngMaterial' in path\client\app @ ./client/app/app.js 21:18-39

How can I inject a dependency with webpack?

Pedro del Sol
  • 2,774
  • 9
  • 40
  • 49
Dorin
  • 1,589
  • 2
  • 16
  • 26

1 Answers1

2

I assume you pointed incorrect dependency name in webpack configuration: ngMaterial instead of angular-material.

ngMaterial is angularjs module name, you point it as a dependency in your angular app module, like this:

angular.module('app', ['ngMaterial'])

But in webpack dependencies you have to point node.js module name, which is angular-material (it is located in node_modules folder after you install it via npm install command)

EDIT:

If needed in your app.js you also have to import that module via import 'angular-material' or require('angular-material'). But if you include this dependency in separate vendor.js file (via webpack), than you shouldn't ever include this module in your app.js, cause it will upload to the page in vendor.js. You'll include it 2 times in your project if you do so.

GProst
  • 7,933
  • 3
  • 21
  • 43
  • Thanks for your explanations, I solve the problem. Can you tell me where I can find more documentation about webpack so I can document myself on this subject? Thanks – Dorin Mar 11 '17 at 12:47
  • Here are good youtube playlists of [webpack lessons](https://www.youtube.com/channel/UCblk3IlXm_ZXkR5OYLuYWaQ/playlists) by Matthew Hsiung. Basics and some advanced config examples. – GProst Mar 11 '17 at 13:41