Usage example in README #9

Activity

1. lmartins commented on Jul 14, 2014

   

   lmartins

   on Jul 14, 2014

   More actions

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

   self-assigned this

   on Jul 14, 2014
3. ColCh commented on Jul 25, 2014

   

   ColCh

   on Jul 25, 2014

   More actions

   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?
4. jeffling commented on Jul 25, 2014

   

   jeffling

   on Jul 25, 2014

   More actions

   ^ you should put in a pull request :)

   How about local angular modules? Do you make an alias for all of them?
5. ColCh commented on Jul 25, 2014

   

   ColCh

   on Jul 25, 2014

   More actions

   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
6. stackfull commented on Jul 25, 2014

   

   stackfull

   on Jul 25, 2014

   Owner

   More actions

   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 (6c7597f).
7. stackfull commented on Jul 25, 2014

   

   stackfull

   on Jul 25, 2014

   Owner

   More actions

   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
8. jeffling commented on Jul 25, 2014

   

   jeffling

   on Jul 25, 2014

   More actions

   @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?
9. stackfull commented on Jul 25, 2014

   

   stackfull

   on Jul 25, 2014

   Owner

   More actions

   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.
10. ColCh commented on Jul 25, 2014

    

    ColCh

    on Jul 25, 2014

    More actions

    What if make installing angular via npm (not bower) required? Or npm packets are clones of bower ones?
11. stackfull commented on Jul 25, 2014

    

    stackfull

    on Jul 25, 2014

    Owner

    More actions

    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.
12. ColCh commented on Jul 26, 2014

    

    ColCh

    on Jul 26, 2014

    More actions

    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
13. stackfull commented on Jul 27, 2014

    

    stackfull

    on Jul 27, 2014

    Owner

    More actions

    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.
14. scottmas commented on Sep 17, 2014

    

    scottmas

    on Sep 17, 2014

    Contributor

    More actions

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