Perhaps based on the new Copy plugin? or webpack 2?

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?

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

1. Installed npm install karma-chrome-launcher --save-dev
2. Added following to package.json: "test-debug": "karma start --browsers=Chrome --single-run=false"
3. When running 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

Workaround

Edit karma.conf.js and override --browsers=Chrome --single-run=false

Any ideas how to make it better?

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?

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.

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 💃

how to change the port 8080 to 6000

Seems like having directories without tests makes the plugin ignore it.

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!

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?

Hello,

There is a version to put on production? Build my files to production ready.

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?.

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?

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

there is a postcss plugin that lets you to use scss syntax in your css without including node-sass or ruby-sass. it would be nice to include it and close #34 in favor of this choice.

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:

I was doing some refactoring of this fantastic seed project and started noticing some errors in the typescript compiler console. I reverted but the errors were still there. Is anyone else seeing this?

in the readme it says this repo is for angular 1.x but then it has angular 2 code in it... plz change readme

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

Thanks for sharing, but Its unclear what the license is. Makes it a problem to use in any commercial project.

Not exactly an issue, but as a webpack noob I could not see how to do prod build. Thanks!

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?

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

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.

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 have seen config for postcss loader, but when I run build, no prefix added for crossing browser.

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

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.

I've created a gist that includes my relevant karma/webpack/test config files as well as the sample test I am trying to run

The test will run, but I get various errors at the $controller call. I've tried all of the following:

1. Added 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.
2. Then, adding 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.
3. I've tried importing 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.

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

I'm trying to run command

node_modules/.bin/karma start

and getting such error

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

Test

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();
	});
});

webpack-related config in Karma.conf.js

		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 use ng-include?

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

the actual isparta-instrumenter-loader has been deprecated in favor of isparta-loader.

we have to switch to the new loader.

Trying to figure it out right now:

• https://www.reddit.com/r/angularjs/comments/3yv2zp/webpack_and_production_minification_best_practices/
• http://thegreenpizza.github.io/2013/05/25/building-minification-safe-angular.js-applications/
• https://docs.angularjs.org/guide/di#dependency-annotation

How to work with scope in this workflow?

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?

What do i wrong? Using your sample?

Best,
mrlove

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

Hello ,I want to import Promise. But I don't want to use typing. how can I use?

The bundle from npm start seems to be over 3 mb. This seems really big. Maybe there's a way to slim it down?

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

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);
});

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.

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.

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