stackfull / angular-webpack-plugin Goto Github PK
View Code? Open in Web Editor NEWPlugin for webpack to teach it angular.js modules
License: MIT License
Plugin for webpack to teach it angular.js modules
License: MIT License
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-"
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.
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.
A very common pattern is to name modules using camelCase but have the implementation file use dashes (and downcase).
The module isn't currently exported, so the dependency list is blank.
Actions from console to see example working.
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.
It would be super useful if the README had a simple usage example.
Please update the dependencies at to set them to something much more flexible.
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.
Not sure this is necessary as the html loader is good for templates.
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.
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.
Why "Cannot find module"?
ui.bootstrap - http://angular-ui.github.io/bootstrap/
__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\""); }()))
"use strict";
angular
.module('app', [
'ui.router',
'ui.bootstrap',
]);
`'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')`
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
ngRoute
webpack
and include it to index.htmlnpm start
This is because angular is not defined when angular-route trying to initialize.
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.
with karma.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.