Giter VIP home page Giter VIP logo

angular-webpack-plugin's Issues

Handle multiple modules per file (locally)

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.

dealing with other angular modules installed with bower

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

Module not found: Error: a dependency to an entry point is not allowed

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

ERROR in ./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.

Require ui.bootstrap (webpackMissingModule)

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')`

Export the module

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

`npm install` at `/demo` yields `does not satisfy requirements` error

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.

Examples & Documentation

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.

Ignore module name prefix

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-"

Failing tests

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.