Quite often, module names have a vendor prefix which doesn't relate to the filesystem directly, but could be aliased to a certain directory.

e.g. ngResource could alias the "ng" part to "lib/angular-"

Actions from console to see example working.

1. git clone https://github.com/stackfull/angular-seed.git stackfullseed
2. cd stackfullseed
3. npm install
4. webpack
   logged error to console
   ERROR in ./app/js/app.js
   Module not found: Error: a dependency to an entry point is not allowed
   @ ./app/js/app.js

5. npm start
6. open http://localhost:8000/app/index-webpack.html#/view1
as a result of 4) see in browser console
Uncaught Error: Cannot find module "myApp.controllers"

PS. same situation with demo example.

Please update the dependencies at to set them to something much more flexible.

Not sure this is necessary as the html loader is good for templates.

It would be super useful if the README had a simple usage example.

Really need to handle this to support using built libraries composed of modules cat'd into one file.

Exporting multiple modules is an option, but I can't help feeling it would be harder to use and debug when the names don't match. Also, AMD and CJS don't work that way.

Not really an issue, but figured I could direct some people to a non-abandoned project that solves this problem but in an opposite way.

instead of using angular's broken dependency system, i remove it completely and use require instead.
everything just magically works.

https://www.npmjs.com/package/remove-angular-modules-loader

The module isn't currently exported, so the dependency list is blank.

Webpack doesn't seem to find third party angularjs modules. Here is my webpack.config.js

var AngularPlugin = require('angular-webpack-plugin');
var path = require('path');
var bowerRooot = __dirname+"bower_components"; 
module.exports = {
        entry:"./app.js",
    output:{
    path:__dirname,
    filename:"bundle.js"
    },
module:{
    loaders:[
        {test: /\.css$/,loader:"style!css"},
        {test:/\.json$/,loader:"json"},
        // {test:/\.html$/,loader:"html"},

    ]
},
resolve:{
    root:[process.cwd(),path.resolve('bower_components/')],
    // root:[process.cwd())],
    extensions: ['','.js'],
},
plugins:[new AngularPlugin()],
externals:{
    // "angular":"angular"
    }
}

When i have angular-ui-bootstrap installed with bower and in my app.js I have this

var myApp = angular.module('myApp', ['ui-bootstrap',]);

webpack throws this error

ERROR in ./app.js
Module not found: Error: Cannot resolve module 'ui-bootstrap' in F:\work-project
s\python\django-projects\MultipleDatePicker
 @ ./app.js

I have webpack 1.4.0-beta9 installed. If i hit npm install at /demo, it yields

npm WARN package.json [email protected] No repository field.
npm ERR! Darwin 13.4.0
npm ERR! argv "/opt/local/bin/node" "/opt/local/bin/npm" "install"
npm ERR! node v0.10.32
npm ERR! npm  v2.0.0
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package webpack does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants webpack@^1.1.0

If I execute webpack, it generates a bundle, though.

Looks like angular-webpack-plugin points at an old version of webpack causing the issue.

running the tests from a clean clone fails because the output code format of webpack has changed between versions.

This is preventing CI from passing on otherwise correctly-operating changes.

https://github.com/btford/astral-angular-annotate

Tests are failing because webpack changed compilation result somehow?

This is the output for first scenario basic-module:

Running "webpackScenario" task
[D] Task source: tasks\webpack-scenario.js

Running "webpackScenario:basic-module" (webpackScenario) task
[D] Task source: tasks\webpack-scenario.js
Verifying property webpackScenario.basic-module exists in config...OK
Files: D:/Workspace/angular-webpack-plugin/test/scenarios/basic-module/webpack.c
onf.js
[D] Run scenarios D:/Workspace/angular-webpack-plugin/test/scenarios/basic-modul
e/webpack.conf.js
[D] Checking for bundle.js from D:/Workspace/angular-webpack-plugin/test/scenari
os/basic-module/webpack.conf.js
Reading D:/Workspace/angular-webpack-plugin/test/scenarios/basic-module/out/bund
le.js...OK
[D] Expected:
([
  function(module, exports, __webpack_require__) {

  (function(angular) {
    (module.exports['main'] = angular.module('main', []));
  }.call(exports, __webpack_require__(1)))
},
function(module, exports, require) {
  // angular.js stub
}
])
[D] Actual:

/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

        /* WEBPACK VAR INJECTION */(function(angular) {// Simplest test
        (module.exports['main'] = angular.module('main', []));

        /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))

/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {


        // stub for angular module


        /*** EXPORTS FROM exports-loader ***/
        module.exports = window.angular

/***/ }
/******/ ])Warning: Scenario failed:
bundle.js didn't match expected content Use --force to continue.

Aborted due to warnings.

Some added comments and tests began to fail.

1. Clone https://github.com/stackfull/angular-seed which demonstrate angular-webpack-plugin using
2. Remove all dependencies from app.js except ngRoute
3. Build app.min.js with webpack and include it to index.html
4. run project with npm start
5. Open http://localhost:8000 and see that error

This is because angular is not defined when angular-route trying to initialize.

Why "Cannot find module"?
ui.bootstrap - http://angular-ui.github.io/bootstrap/

bundle.js

__webpack_require__(!(function webpackMissingModule() { throw new Error("Cannot find module \"template/modal/window.html\""); }()));
__webpack_require__(!(function webpackMissingModule() { throw new Error("Cannot find module \"template/tabs/tabset.html\""); }()));
__webpack_require__(!(function webpackMissingModule() { throw new Error("Cannot find module \"ui.bootstrap.tpls\""); }()))

app.js

"use strict";

angular
.module('app', [
'ui.router',
'ui.bootstrap',
]);

webpack.config.js

  `'ui.router$': path.resolve(__dirname, 'www/static/bower_components/angular-ui-router/release/angular-ui-router.js'),`
  `'ui.bootstrap$': path.resolve(__dirname, 'www/static/bower_components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js')`

with karma.

I love this plugin but am trying to convert a MEAN.JS project from Grunt to webpack and I'm having a hell of a time due to lack of documentation on both webpack and this plugin. Is there anyone who might have some good write-ups or advice on making this conversion? Maybe some generic examples or documentation, even? It'd be much appreciated.

A very common pattern is to name modules using camelCase but have the implementation file use dashes (and downcase).