preboot / angularjs-webpack Goto Github PK
View Code? Open in Web Editor NEWA complete, yet simple, starter for AngularJS using webpack
License: MIT License
A complete, yet simple, starter for AngularJS using webpack
License: MIT License
Hi,
When I put my sass files (or even CSS files) in src/style, and then run npm style no styles are getting applied to the whole project. Is there a special name/way I should do that?
I don't want to apply styles in components, just get all styles from src/style.
I'm sure I'm doing something wrong, but can't where the problem is...
I tried to add google api scripts by "typing install dt~gapi", it added to typings folder, but after that i have no idea how can i import the gapi in app folder, like
const gapi = <gapi>window['gapi']; // here will show error gapi is not defined, so cant convert window.gapi to gapi, what should i do?
package.json
"scripts": {
"build": "webpack --config webpack.build.js --bail -p",
"dev": "node node_modules/.bin/webpack-dev-server --history-api-fallback --hot --inline --progress",
"test": "karma start",
"test:live": "karma start --auto-watch --no-single-run"
},
no start
I get the roughly the following complaint every time I try to run any of the npm commands. The only thing I did was update everything in the package.json.
Output when I run npm run test:live
/usr/local/bin/node /usr/local/bin/npm run-script test:live
[email protected] test:live /Users/gabrielkunkel/WebstormProjects/angular-webpack-workflow
karma start --auto-watch --no-single-run
Hash: 8344a6c0a9b3c44a5636
Version: webpack 1.12.9
Time: 598ms
ERROR in ./src/tests.webpack.js
Module build failed: ReferenceError: [BABEL] /Users/gabrielkunkel/WebstormProjects/angular-webpack-workflow/src/tests.webpack.js: Unknown option: /Users/gabrielkunkel/WebstormProjects/angular-webpack-workflow/package.json.stage
at Logger.error (/Users/gabrielkunkel/WebstormProjects/angular-webpack-workflow/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
at OptionManager.mergeOptions (/Users/gabrielkunkel/WebstormProjects/angular-webpack-workflow/node_modules/babel-core/lib/transformation/file/options/option-manager.js:262:18)
at OptionManager.addConfig (/Users/gabrielkunkel/WebstormProjects/angular-webpack-workflow/node_modules/babel-core/lib/transformation/file/options/option-manager.js:221:10)
at OptionManager.findConfigs (/Users/gabrielkunkel/WebstormProjects/angular-webpack-workflow/node_modules/babel-core/lib/transformation/file/options/option-manager.js:370:30)
at OptionManager.init (/Users/gabrielkunkel/WebstormProjects/angular-webpack-workflow/node_modules/babel-core/lib/transformation/file/options/option-manager.js:412:12)
at File.initOptions (/Users/gabrielkunkel/WebstormProjects/angular-webpack-workflow/node_modules/babel-core/lib/transformation/file/index.js:190:75)
at new File (/Users/gabrielkunkel/WebstormProjects/angular-webpack-workflow/node_modules/babel-core/lib/transformation/file/index.js:121:22)
at Pipeline.transform (/Users/gabrielkunkel/WebstormProjects/angular-webpack-workflow/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at Instrumenter.instrumentSync (/Users/gabrielkunkel/WebstormProjects/angular-webpack-workflow/node_modules/isparta-instrumenter-loader/node_modules/isparta/lib/instrumenter.js:64:55)
at Object.module.exports (/Users/gabrielkunkel/WebstormProjects/angular-webpack-workflow/node_modules/isparta-instrumenter-loader/index.js:20:25)
I like you project - I have a similar one that I'm trying to set up karma testing with - but mine has all the vendor files in a separate bundle(angular, ngresource, nganimate) etc..
Any ideas how you would set that up?
the actual isparta-instrumenter-loader has been deprecated in favor of isparta-loader.
we have to switch to the new loader.
I got the following error
PhantomJS 2.1.1 (Linux 0.0.0) leave API service create(): should create a leave FAILED
static/app.min.js:4804:54
forEach@static/app.min.js:440:25
loadModules@static/app.min.js:4764:13
createInjector@static/app.min.js:4686:31
WorkFn@node_modules/angular-mocks/angular-mocks.js:3120:60
loaded@http://localhost:9876/context.js:151:17
TypeError: undefined is not an object (evaluating '$httpBackend.expectPOST') in test/leave.service.tests.js (line 65)
test/leave.service.tests.js:65:16
loaded@http://localhost:9876/context.js:151:17
var chai = require('chai');
var assert = chai.assert;
require('../src2/pages/leaves/leave.service.js');
describe('leave API service', function () {
var service;
var $httpBackend;
beforeEach(angular.mock.module('app'));
beforeEach(inject(function (_$httpBackend_, LeaveService) {
$httpBackend = _$httpBackend_;
service = LeaveService;
}));
it('create(): should create a leave', function (done) {
var leave = {name: 'test'};
$httpBackend.expectPOST('/api/leave/', leave).respond(201, leave);
service.create(leave).then(function () {
done();
});
$httpBackend.flush();
});
});
files: [
'./static/app.min.js',
'node_modules/angular-mocks/angular-mocks.js',
{pattern: 'test/leave.service.tests.js', watched: false}
],
preprocessors: {
'test/leave.service.tests.js': ['webpack']
},
Do you know why I got trouble with the injection?
how to change the port 8080 to 6000
I have seen config for postcss loader, but when I run build, no prefix added for crossing browser.
Hi!
In order to use this kind of app structure for angular
app.js
--- controllers
------ controller.js
--- services
------ service.js
The webpack configuration you have will work? Or if not, is there a way you can help me to do that?
Kind regards.
When I run the build process 'npm run build' all seems good...
...until I open/run the dist/index.html in a browser. Nothing happens.
Perhaps there's a 'linking' issue within the build process? No doubt a simple fix, but I'm just beginning this adventure.
By the way, thanks for providing this workflow!
edit - I'm working with the current/original files; I've made not further adjustments.
<main>
<h1 class="title">Hello from Angular !</h1>
<!-- Images (and assets) are parsed and loaded from within the public directory -->
<img src="/img/logo.png">
</main>
<footer>
<a ng-href="{{app.url}}">Webpack Angular Starter</a>
</footer>
The comment leads one to believe that webpack will modify the src attribute value, but I don't see any evidence that this is happening or is configured to happen.
I need this and I'm new to webpack, so I thought I'd ask you about it.
I created a project and built off of this starter, but when I try to run my first test:
import app from './app.module'; // set up the app module.
import './globalservices/someService'; // register the service onto the 'app' module.
describe('someService', () => {
let service;
beforeEach(() => {
angular.mock.module('app');
angular.mock.inject(_someService_ => {
service = _someService_;
});
});
it('service should exist.', () => {
console.log(service);
return;
});
});
I get an error like
❯ npm run test
> [email protected] test /Users/trusktr/src/refuel4+sme-onboarding
> karma start
05 05 2016 22:22:53.200:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
05 05 2016 22:22:53.245:INFO [launcher]: Starting browser PhantomJS
05 05 2016 22:22:58.348:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#LzaJexxVlI1wyYJ5AAAA with id 1411457
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
ReferenceError: Can't find variable: Map
at undefined:14
Perhaps one of the files I imported eventually imports something that use new Map
, but, as you can see the error isn't helpful at all (no idea where this happens). Any thoughts?
Using the npm run server default config. The ENV inside webpack.config reports as: server
If I add this statement that'll cause an exception in AppCtrl:
console.log(something_undefined);
Instead of seeing an exception notice in the console like:
Uncaught ReferenceError: something_undefined is not defined
nothing appears in the browser console. The script just stops loading at that point.
All the while, webpack reports:
Child html-webpack-plugin for "index.html":
chunk {0} index.html 712 bytes
webpack: bundle is now VALID.
Tried --bail option. But it makes no difference.
I'm wondering how no one else has posted about this. Is this a known issue?
Hello ,I want to import Promise. But I don't want to use typing. how can I use?
After running npm start
, changing the entry JS file or the HTML file will not trigger a rebuild. Trying to run npm run watch
will yield a missing script: watch
error. Logs attached below.
When running npm start
and updating app.js
and index.html
➜ kyoto-web git:(master) ✗ npm start
> [email protected] start /Users/dfkimera/Projects/kyoto-web
> npm run server
> [email protected] server /Users/dfkimera/Projects/kyoto-web
> webpack-dev-server --history-api-fallback --inline --progress
70% 1/1 build moduleshttp://localhost:8080/
webpack result is served from http://localhost:8080/
content is served from ./src/public
404s will fallback to /index.html
chunk {0} app.bundle.js (app) 1.34 MB [rendered]
Child html-webpack-plugin for "index.html":
chunk {0} index.html 314 bytes [rendered]
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
chunk {0} app.bundle.js (app) 1.34 MB
Child html-webpack-plugin for "index.html":
chunk {0} index.html 314 bytes
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
chunk {0} app.bundle.js (app) 1.34 MB
Child html-webpack-plugin for "index.html":
chunk {0} index.html 341 bytes [rendered]
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
chunk {0} app.bundle.js (app) 1.34 MB
Child html-webpack-plugin for "index.html":
chunk {0} index.html 360 bytes [rendered]
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
chunk {0} app.bundle.js (app) 1.34 MB [rendered]
Child html-webpack-plugin for "index.html":
chunk {0} index.html 360 bytes
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
chunk {0} app.bundle.js (app) 1.34 MB
Child html-webpack-plugin for "index.html":
chunk {0} index.html 631 bytes [rendered]
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
chunk {0} app.bundle.js (app) 1.34 MB [rendered]
Child html-webpack-plugin for "index.html":
chunk {0} index.html 631 bytes
webpack: bundle is now VALID.
When running npm run watch
➜ kyoto-web git:(master) ✗ npm run watch
npm ERR! Darwin 14.3.0
npm ERR! argv "/usr/local/Cellar/node/5.7.0/bin/node" "/usr/local/bin/npm" "run" "watch"
npm ERR! node v5.7.0
npm ERR! npm v3.6.0
npm ERR! missing script: watch
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! /Users/dfkimera/Projects/kyoto-web/npm-debug.log
Script throws "TypeError: Cannot assign to read only property 'canCollapseWhitespace' of true"
It seems that the reason is changes in interface of html-minifier, which is used by html-webpack-plugin (jantimon/html-webpack-plugin#97)
Just replace "minify: BUILD" in html-webpack-plugin initialization to something like
minify: BUILD ?
{
"removeComments": true,
"removeCommentsFromCDATA": true,
"removeCDATASectionsFromCDATA": true,
"collapseWhitespace": true,
"minifyJS": true,
"minifyCSS": true
} :
false
https://github.com/kangax/html-minifier#options-quick-reference
Perhaps based on the new Copy plugin? or webpack 2?
npm run build
> [email protected] build E:\91jiayouapp_ng2\unpackage\jiayou_source
> webpack --config config/webpack.prod.js --progress --profile --bail
10% 0/3 build modulests-loader: Using [email protected] and E:\91jiayouapp_ng2\unpackage\jiayou_source\tsconfig.json
10525ms build modules
35ms seal
20ms optimize
2161ms build modules
34ms hashing
86ms create chunk assets
12628ms additional chunk assets
5584ms optimize chunk assets
1153ms optimize assets
93ms emit
npm ERR! Windows_NT 6.1.7600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.3.1
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `webpack --config config/webpack.prod.js --progress --profile --bail`
npm ERR! Exit status 3221225501
npm ERR!
npm ERR! Failed at the [email protected] build script 'webpack --config config/webpack.prod.js --progress --profile --bail'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-webpack package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --config config/webpack.prod.js --progress --profile --bail
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-webpack
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-webpack
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! E:\91jiayouapp_ng2\unpackage\jiayou_source\npm-debug.log
but it can run all right in mac-os
Not exactly an issue, but as a webpack noob I could not see how to do prod build. Thanks!
When I clone, npm install
and then npm run start
, I get the following output:
λ npm run start
> [email protected] start C:\dev\me\angular-webpack
> npm run server
> [email protected] server C:\dev\me\angular-webpack
> webpack-dev-server --history-api-fallback --inline --progress
70% 1/1 build moduleshttp://localhost:8080/
webpack result is served from http://localhost:8080/
content is served from ./src/public
404s will fallback to /index.html
chunk {0} app.bundle.js (app) 1.38 MB [rendered]
Child html-webpack-plugin for "index.html":
chunk {0} index.html 303 bytes [rendered]
webpack: bundle is now VALID.
When I browse to http://localhost:8080, I get:
I haven't changed anything. The server seems to be running (no errors in console output). Any ideas?
Edit:
I'm on Windows 7.
I have a directive with img src='image1.jpg' tag inside it.
The image file was compiled but the img src content not changed.
I understand that ES6 style with Angular 1.x still has a problem with directive.
I'm using one of the available solution, creating a static function and return directive instance
static directiveFactory($http, $location) {
TopNavDir.instance = new TopNavDir($http, $location);
return TopNavDir.instance;
}
I'm wondering whether the img src not changed because of angular directive problem with ES6 style
What do i wrong? Using your sample?
Best,
mrlove
Forgive me if i am placing it in the wrong spot, but pretty new here for me. I had your old version working and i used the resolverplugin to get bower compontents in. With the new version it doesn't work anymore if i add:
config.plugins = [
new webpack.ResolverPlugin([
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
], ["normal", "loader"])
];
I get:
Error: Cannot find module './ResolverPlugin'
I did a fresh install/clean etc, checked that the name is present in webpack.js, which it is. What am i doing wrong? Or is it the webpack 2 issue?
on fresh clone and install getting this error
ERROR in ./src/app.js
Module parse failed: /Users/danielcarter/Documents/code/bachman/node_modules/babel-loader/index.js!/Users/danielcarter/Documents/code/bachman/src/app.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import angular from 'angular';
|
| angular.module('app', []);
@ multi app
npm install karma-chrome-launcher --save-dev
package.json
: "test-debug": "karma start --browsers=Chrome --single-run=false"
npm start test-debug
I'm getting following error:Chrome 51.0.2704 (Mac OS X 10.11.5) ERROR
Uncaught Error: Cannot find module "./app"
at http://localhost:9876/context.html:5
Edit karma.conf.js
and override --browsers=Chrome --single-run=false
Any ideas how to make it better?
I am deploying my dist to a subdirectory. I noticed the images assume from the root. I tried changing the publicPath, but now it doesn't work in local. I'm new to webpack, and I don't know what's the best way to do this.
Can you provide an example on how to use the new templating that was intereduced in the latest version of "html-webpack-plugin".
i can't make it it work since i updated from version 1.6.2
this is my index.html:
<!doctype html>
< html>
< head>
< meta charset="UTF-8">
< title><%- htmlWebpackPlugin.options.title %>< /title>
</ head>
< body>
< div class="container">
< ui-view></ ui-view>
< /div>
< /body>
< /html>
and my webpack.make.js file is similar to yours:
new HtmlWebpackPlugin({
filename: 'index-dev.html',
template: './src/index.html',
inject: true,
dev: true,
title: 'Dev mode'
})
Hello,
There is a version to put on production? Build my files to production ready.
I know you added the copy web plugin, so you can copy assets from your src to build. Isn't there something that can parse the html that sees images and then hashes it, as it does right now with all my css that is being loaded and all other things it 'requires'. Because i have like a banner at the top in the html in my code. So i have all these fancy hashes of everything, except for that banner file which is just copied over. I tried to look around, but i could only find a possible solution by using includes or using an extra file which defeats the purpose of the automation. Any thoughts?
How to work with scope in this workflow?
I am trying to get karma + webpack + angular working based on your examples, but you do not have any .spec
file examples in the repo to confirm how things should be working. I'm currently unable to get a spec working. The app I've created works fine and I can get the tests to run, but no matter what I do I keep coming back to:
Argument 'NgculatorCtrl' is not a function, got undefined
I also tried cloning this repo and adding an simple app.spec
file but it seems like it doesn't get webpacked (it will complain if I try to use an arrow function).
npm test
will also complain if you try to use beforeEach(module('app'))
. I think this may be related to my problem.
The test will run, but I get various errors at the $controller
call. I've tried all of the following:
myapp/index.js
to the test.webpack.js
file so that it loads the module. I also have to remove import 'angular';
from that file. This yields the same error.beforeEach(module('myapp'))
to any test -- yields Object is not a function (evaluating 'module('myapp')')
. If I do angular.module('myapp')
I don't get an error. angular.module('notmyapp')
does emit an error.angular-mocks
right after importing angular
in the entry point file just in case importing it after defining modules has an effect. It doesn't seem like this matters ... nothing changes.If you could include a working version of a test it would help me out -- especially if you can include specifics about where I am going wrong. It seems to me that you would also have to include your source files and not just the .spec
/test files so that your module is loaded, but then I'm not sure why module('myapp')
doesn't work in tests.
As from isparta-loader's readme, it is deprecated in favor of babel-plugin-istanbul.
I've made this change in my own project but I'm not sure I've done it correctly.
I can make a pr but I need an help to be sure it is all correct.
Whilst using this seed with es5 only syntax, I tried to require each spec file in the tests.webpack.js
file in the following way, hoping it would work. It comes back with an error on almost every file, scss, js, html etc.. I only have one spec file so far and since test
only came back as one path, I assumed it would include that one path? What's going on here, am I missing something?
require('angular');
require('angular-mocks/angular-mocks');
var testsContext = require.context(".", true, /.spec$/);
testsContext.keys().forEach(function(test) {
require(test);
});
The description of this repo still mentions webpack 2
but you reverted those changes.
What's the status of this with webpack 2? :O Why was it reverted? Not ready yet I guess?
Also is there a way to run the server + test + watch for changes at the same time? Thanks 💃
npm WARN deprecated [email protected]: Use [email protected] instead
npm WARN deprecated [email protected]: Please use latest version of phantomjs
npm WARN deprecated [email protected]: this package has been reintegrated into npm and is now out of date with respect to npm
Is there a reason why karma-phantomjs2 is being used? If not, I can try and upgrade it to the latest version and submit a pull request.
Where are my manners? Thank you for this repository. This is a great starting place!
How to use ng-include?
Thanks for sharing, but Its unclear what the license is. Makes it a problem to use in any commercial project.
First I am new to webpack and my knowledge is limited.Is there any way I can incorporate eslint while running in webpack?. If so what all changes I need to make to webpack config file. Also I noticed my debug points in chrome are not getting hit, Am I missing something here?.
See the output
$ npm run test
[email protected] test d:\000-GitRepos\VZ.Test\angular-webpack-workflow
karma start
14 12 2015 19:00:59.454:INFO [karma]: Karma v0.13.15 server started at http://localhost:9876/
14 12 2015 19:00:59.463:INFO [launcher]: Starting browser PhantomJS
14 12 2015 19:01:00.273:INFO [PhantomJS 1.9.8 (Windows 8 0.0.0)]: Connected on socket T91Aflg7Hv6ws4UBAAAA with id 28015571
PhantomJS 1.9.8 (Windows 8 0.0.0): Executed 0 of 0 ERROR (0.002 secs / 0 secs)
npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "test"
npm ERR! node v5.1.0
npm ERR! npm v3.3.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] test: karma start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script 'karma start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-webpack-workflow package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! karma start
npm ERR! You can get their info via:
npm ERR! npm owner ls angular-webpack-workflow
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! d:\000-GitRepos\VZ.Test\angular-webpack-workflow\npm-debug.log
Hi,
downloaded all dependencies but getting error,
ERROR in .//css-loader?sourceMap!.//postcss-loader!./src/style/app.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/../workspace/angular-webpack/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:157:31)
at LazyResult.then (/../workspace/angular-webpack/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:79:21)
at Object.module.exports (../workspace/angular-webpack/node_modules/postcss-loader/index.js:47:10)
@ ./src/style/app.css 4:14-132
Some reading: http://angular-tips.com/blog/2015/06/using-angular-1-dot-x-with-es6-and-webpack/
Having a look at the list of features:
Having look at the source code: https://github.com/preboot/angular-webpack/blob/master/webpack.config.js#L97-L102
I put a test.scss
file into style
directory and the styles wasn't applied.
body {
a {
color: red;
}
}
My experience with WebPack so far - it combines all .js
into a single app.bundle.js
- I would like to have same feature for the styles... Before I start reinventing the wheel - is it a matter of changing some settings in CSS loader, or maybe adding some other loader such as: https://github.com/jtangelder/sass-loader ?
Or maybe it is working all the time, it's just me not naming files correctly, not importing them?
I can confirm that test.css
is working just fine while .scss
fails to load:
in the readme it says this repo is for angular 1.x but then it has angular 2 code in it... plz change readme
Seems like having directories without tests makes the plugin ignore it.
The bundle from npm start
seems to be over 3 mb. This seems really big. Maybe there's a way to slim it down?
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.