Usage example in README

[wolever]

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

[lmartins]

Really curious about this also, would love to see some examples / use cases for it. Tks.

[ColCh]

Did you tried it?

Getting started:

• Install: npm i -D angular-webpack-plugin
• Include it in webpack config:

var AngularWebpackPlugin = require('angular-webpack-plugin');
// ...
module.exports = {
    // ...
    plugins: [ new AngularWebpackPlugin ],
    // ...
};

• Require modules in app:

app = angular.module 'MyApp', [
    # Main deps
    'ngAnimate'
]

(it will lazy require('angular') automatically)

• it will require('ngAnimate'). Specify how to find 'em: I'm using angular from bower, some shims need be provided. In config, imports\exports. Angular variable is global also (expose-loader) :

module.exports = {
        // ...
    module: {
        loaders: [
            // Shim Angular modules
            { test: /angular.js$/, loader: "expose?angular!exports?window.angular" },
            // Regular angular module
            { test: /angular-[^\.]+.js$/, loader: "imports?angular" },
            // ...
        ]
    }
        // ...
};

Now get some aliases for ng-modules from bower_components :

module.exports = {
        // ...
    resolve: {
        alias:{
            // Main Angular script alias
            'angular': 'angular/angular.js',
            // Angular modules
            'ngAnimate': 'angular-animate/angular-animate.js'
        },
        modulesDirectories: ["bower_components", "web_modules", "node_modules"],
    },
        // ...
};

• Now place angular modules in web_modules (resolve.modulesDirectories) and dependencies will be require'd by plugin and resolved by webpack

P.S. manually aliasing of ngAnimate is bad ... maybe someone advise me how to call deps more abstract?

[jeffling]

^ you should put in a pull request :)

How about local angular modules? Do you make an alias for all of them?

[ColCh]

No, you should place 'em in moduleDir (web_modules by default.. or your custom) and they will be revolved by webpack - no manual aliasing needed.

Generally, aliasing in bad, and it's my fault :) It's like a hack for #3

[stackfull]

I've been working on a fork of angular-seed to demonstrate how to simply switch from the manual setup most people are familiar with. https://github.com/stackfull/angular-seed

Problem is that angular-webpack-plugin isn't fully working yet. I had to make changes to have aliases properly resolved and that broke the tests (6c7597f9403189eb81c773cf29f03d213f9ab0bb).

[stackfull]

The reason I want aliases to work is so that if you have modules like "myApp.mod1" "myApp.mod2" and files src/js/amazingapp/mod1.js and src/js/amazingapp/mod2.js, you can alias myApp to src/js/amazingapp and have it all just work

[jeffling]

@stackfull Yes! That would be really useful :)

Vaguely related question: Right now, if I have a module, a.b.c will it automatically look for a/b/c/index.js?

[stackfull]

I don't think that will work as of v0.0.1. I was finishing off the resolve too early by looking for files/directories instead of modules.

I hope to make a push at this over the weekend.

[ColCh]

What if make installing angular via npm (not bower) required? Or npm packets are clones of bower ones?

[stackfull]

it depends on the author as npm and bower are published separately - you can use the same repo or not, depending on taste.

The reason angular-webpack-plugin doesn't work yet is that the conversion of module names from dots to paths isn't integrated properly with the rest of webpack. So right now, you can use all the features of webpack to find modules (looking for node_modules, using aliases etc.) - and you can use the plugin to recognise angular modules - but if you rely on turning dotted module namespaces into directories, all the other goodies aren't available.

[ColCh]

If you install angular commonjs module via

npm install angular npm install angular-router

then you able to require('angular') or require('angular-route') 'em without aliases (yeah!)

For ngRouter dependencies I wrote some hacks :) Please see 00f3530

[stackfull]

Updated with a few fixes, readme links to the angular-seed but I'd like to add a few more notes before closing this issue.

[scottmas]

A recent update added a demo folder. This should be a good starting point I imagine.