cmelion / generator-ng2-webpack Goto Github PK

View Code? Open in Web Editor NEW

109.0 109.0 18.0 9.15 MB

An opinionated tool for scaffolding an app using angular2 and webpack

License: MIT License

JavaScript 85.34% HTML 0.94% TypeScript 12.84% CSS 0.79% Shell 0.09%

generator-ng2-webpack's Introduction

Hi there 👋

🔭 I’m currently working on tooling for a major media platform
🌱 I’m currently learning Polkadot/Substrate
🤔 I’m looking for help with NewYorkCoin
💬 Ask me about React Hooks and Redux
📫 How to reach me:
- Telegram: https://telegram.me/cmelion
- Discord: cmelion#3688 Discord ID: 402111999145672706
⚡ Fun fact: I've architected enterprise applications for the U.S. Navy and the City of New York - using XSLT - believe it or not!

Git Awards

Rankings

generator-ng2-webpack's People

Contributors

Stargazers

Watchers

Forkers

gitter-badger chaocssun mattxo heshamz elbig12 quyip8818 barakethan jimcho leexhwhy voznyy fantasy9527 loiphamvn phirov mshahin364 pchomik m00zi ascode virajs

generator-ng2-webpack's Issues

Weird hidden characters after build

I'm using the build on SalesForce Cloud market as a static resource, I wasn't and error from the application when trying to save the result js files, I've isolated the problem by removing the line by line and I've found weird characters that are not allowed in a Html context. one of the examples of what I'm talking about is this '�[' if you try to delete the first quote the cursor doesn't move the first time as there is a hidden char between the visible ones, another problem I've found was Ft=["","","�"].

Let me know if you need more info

Source maps not working in Safari

Safari may not support the complete set of webpack dev server options.

current configuration is:

    if (isTestEnv) {
        config.devtool = 'inline-source-map';
    } else if (ENV === 'build') {
        config.devtool = false;
    } else {
        config.devtool = 'cheap-module-eval-source-map';
    }

consider using one of the following: source-map, cheap-source-map, cheap-module-source-map
See survivejs/react-book#260

Roadmap: Mocking with JSON server

Use the Youtube search example to demonstrate mocking with JSON server:

The example demonstrates rxjs, streams, observables, switchmap, cancelling ajax requests and more.

Start browser once build is ready

After npm start webpack successful build it is nice when browser opening the url.

I used this trick with node start http://localhost:8080 && node myserver.js however in case of webpak it is just partly working. If I have such script start http://localhost:8080 && npm run server the browser opening the page before webpack is ready so manual page refresh required after webpack is finished build.

Issues with Twitter Bootstrap

I read the documentation on webpack and found it impressive. Uniform loading for all your resources! Use npm for package management! But I soon ran into problems. After generating the initial project, my goal was to modify it slightly to load Twitter Bootstrap, so I tried using npm to install bootstrap-webpack. The following are examples of errors I encountered around unmet peer dependencies:


npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] requires a peer of es6-shim@^0.33.3 but none was installed.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.


...

[email protected] /home/jacob/workspace/scion/scxml.io
├── [email protected]
├── UNMET PEER DEPENDENCY [email protected]
├── UNMET PEER DEPENDENCY exports-loader@>=0.6.2
├── UNMET PEER DEPENDENCY imports-loader@>=0.6.3
└── UNMET PEER DEPENDENCY less-loader@>=0.6.2

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] requires a peer of es6-shim@^0.33.3 but none was installed.
npm WARN [email protected] requires a peer of less-loader@>=0.6.2 but none was installed.
npm WARN [email protected] requires a peer of imports-loader@>=0.6.3 but none was installed.
npm WARN [email protected] requires a peer of exports-loader@>=0.6.2 but none was installed.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

This is the first time I have seen errors about peer dependencies from npm. After working on this for awhile, I reached a point where it seemed like all dependencies were available in node_modules, so I tried loading bootstrap-webpack in bootstrap.ts, but this caused the following runtime error:

VM11030:76 EXCEPTION: Tried to get instruction before the type was loaded.BrowserDomAdapter.logError @ VM11030:76BrowserDomAdapter.logGroup @ VM11030:86ExceptionHandler.call @ VM10867:56(anonymous function) @ VM10934:192NgZone._notifyOnError @ VM10935:431collection_1.StringMapWrapper.merge.onError @ VM10935:326Zone.run @ VM10852:1247(anonymous function) @ VM10935:344zoneBoundFn @ VM10852:1220lib$es6$promise$$internal$$tryCatch @ VM10852:468lib$es6$promise$$internal$$invokeCallback @ VM10852:480lib$es6$promise$$internal$$publish @ VM10852:451(anonymous function) @ VM10852:123Zone.run @ VM10852:1243zoneBoundFn @ VM10852:1220lib$es6$promise$asap$$flush @ VM10852:262
VM11030:76 STACKTRACE:BrowserDomAdapter.logError @ VM11030:76ExceptionHandler.call @ VM10867:58(anonymous function) @ VM10934:192NgZone._notifyOnError @ VM10935:431collection_1.StringMapWrapper.merge.onError @ VM10935:326Zone.run @ VM10852:1247(anonymous function) @ VM10935:344zoneBoundFn @ VM10852:1220lib$es6$promise$$internal$$tryCatch @ VM10852:468lib$es6$promise$$internal$$invokeCallback @ VM10852:480lib$es6$promise$$internal$$publish @ VM10852:451(anonymous function) @ VM10852:123Zone.run @ VM10852:1243zoneBoundFn @ VM10852:1220lib$es6$promise$asap$$flush @ VM10852:262
VM11030:76 Error: Tried to get instruction before the type was loaded.
    at new BaseException (eval at <anonymous> (http://localhost:8080/js/common.js:1142:2), <anonymous>:16:23)
    at RouteRule._getInstruction (eval at <anonymous> (http://localhost:8080/js/common.js:2426:2), <anonymous>:107:19)
    at eval (eval at <anonymous> (http://localhost:8080/js/common.js:2426:2), <anonymous>:92:46)
    at Zone.run (eval at <anonymous> (http://localhost:8080/js/vendor.js:640:2), <anonymous>:1243:24)
    at Zone.eval [as run] (eval at <anonymous> (http://localhost:8080/js/common.js:1544:2), <anonymous>:344:42)
    at zoneBoundFn (eval at <anonymous> (http://localhost:8080/js/vendor.js:640:2), <anonymous>:1220:26)
    at lib$es6$promise$$internal$$tryCatch (eval at <anonymous> (http://localhost:8080/js/vendor.js:640:2), <anonymous>:468:17)
    at lib$es6$promise$$internal$$invokeCallback (eval at <anonymous> (http://localhost:8080/js/vendor.js:640:2), <anonymous>:480:18)
    at lib$es6$promise$$internal$$publish (eval at <anonymous> (http://localhost:8080/js/vendor.js:640:2), <anonymous>:451:12)
    at eval (eval at <anonymous> (http://localhost:8080/js/vendor.js:640:2), <anonymous>:123:10)

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/33459951-issues-with-twitter-bootstrap?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Add npm/yeoman task to make a component routable.

Not all components will have routes associated with them. Provide a generator task for adding a component to the route config (possibly a task to remove a component as well).

The user will be presented a list of components (that do not already have routes) to choose from.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/31646267-add-npm-yeoman-task-to-make-a-component-routable?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Allow 100% code coverage

To allow 100% code coverage (not currently possible because of the typescript helper functions __extends, __decorate etc), one can

npm install ts-helpers --save-dev
add import 'ts-helpers' to the top of app/root.spec.ts and bootstrap.ts
add 'noEmitHelpers : true' to tsconfig.json

Replace router-deprecated

The new rc1 router can be used no probs.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/34869347-replace-router-deprecated?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Reducers are not maintaining state during hot-reload

It's important since we don't want to recreate application state every time we make a minor change to css or js.

erikras/react-redux-universal-hot-example#44

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/35089323-reducers-are-not-maintaining-state-during-hot-reload?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

"Turn-on" CI and other code quality tools for generator-ng2-webpack

https://github.com/integrations/feature/code

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/34370735-turn-on-ci-and-other-code-quality-tools-for-generator-ng2-webpack?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

The jJQuery plugin is not working after getting the data -http://www.owlcarousel.owlgraphic.com/

The jQuery plugin is not working after getting the data -http://www.owlcarousel.owlgraphic.com/

i got issues on *var owl = jQuery(this.elementRef.nativeElement).find('#breif'); owl.owlCarousel();

My full code are given bellow

angular 2 component:

/ beautify ignore:start /
import {Component, OnInit , ElementRef, Inject } from '@angular/core';
import {FORM_DIRECTIVES} from '@angular/common';
import {CAROUSEL_DIRECTIVES} from 'ng2-bootstrap/components/carousel';
/ beautify ignore:end /
import {Api} from '../../../../services/api';

declare var jQuery:any;

@component({
selector: 'breif',
directives: [CAROUSEL_DIRECTIVES],
template: require('./template.html')
})
export class BreifComponent implements OnInit {

elementRef: ElementRef;
breifs: Object;

public myInterval:number = 5000;
public noWrapSlides:boolean = false;
public slides:Array = [];

constructor(@Inject(ElementRef) elementRef: ElementRef ,  private api: Api) {
      this.elementRef = elementRef
      this.loadBreif();

  }

  ngOnInit() {

    **var owl = jQuery(this.elementRef.nativeElement).find('#breif');
    owl.owlCarousel();**

  }



loadBreif(){
  this.api.getBreif().subscribe(
    data => {
      this.breifs = data.result.articles;

    },
    err => console.error(err),
    () => {

    }

  )

  }

}
template.html

<-div class="owl-carousel" id="breif"- >
<-div class="item" *ngFor="let breif of breifs">

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/36735854-the-jjquery-plugin-is-not-working-after-getting-the-data-http-www-owlcarousel-owlgraphic-com?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Style loader ERROR : Invalid CSS when running via Windows Powershell

Hi there,

After a clean install of the generator: I am getting the following error when the style loader is processing ALL SCSS files.

/src/style/app.scss
/src/app/style.scss

Environment: Windows 10, Powershell 5. Issue does not present when running from vanilla CMD prompt.

Obviously not a show stopper, just would like to know what is going on here.
ERROR in ./~/css-loader?sourceMap!./~/postcss-loader!./~/sass-loader!./~/raw-loader!./~/postcss-loader!./~/sass-loader!./src/style/app.scss Module build failed: // styles in src/style directory are applied to the whole page body { background: #0147A7; color: #fff; margin: 0; padding: 0; } a { color: #03A9F4; } ^ Invalid CSS after "module.exports": expected "{", was '= "body {\\n backgr' in C:\git\ng2-webpack\src\style\app.scss (line 1, column 15) @ ./src/style/app.scss 4:14-303 13:2-17:4 14:20-309

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/37080719-style-loader-error-invalid-css-when-running-via-windows-powershell?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Ensure generated tests are added in the appropriate location.

To achieve hierarchical reports, tests need to be nested within the appropriate parent test.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

delayed-open task is platform specific

Problem:
https://www.npmjs.com/package/open

How it (is supposed to) work
on win32 uses start
on darwin uses open
otherwise uses the xdg-open script from freedesktop.org

"scripts": {
"delayed-open": "sleep 5 && open http://localhost:9000"
}

Solution: switch to https://www.npmjs.com/package/opener

Why
Because Windows has start, Macs have open, and nix has xdg-open. At least according to some guy on StackOverflow. And I like things that work on all three. Like Node.js. And Opener.
{
"scripts": {
"test": "opener ./test/runner.html"
},
"devDependencies": {
"opener": ""
}
}

Consider making linting optional

[187, 5]: misplaced opening brace
[197, 5]: misplaced opening brace

Fills up the browser console when developing if you use new line bracing, which tends hides to hide exceptions etc.

Tests for generated application broken by migration to rc.1

There were several breaking changes, not the least of which was the change to the import signature for angular2 (@angular). karma.config may need substantial changes.

Component, Service and Pipe generators don't comply with opinionated naming conventions

https://github.com/cmelion/generator-ng2-webpack/wiki/I-hate-that-all-the-files-are-named-index.ts,-style.scss-and-template.html

Debugging with generator-ng2-webpack projects

"I found it challenging to debug this because the default "npm start" script generated a build with webpack that was fairly opaque. I do not believe source maps were turned on in the generated build, and so it was difficult to debug the built JavaScript to see what might be wrong. " - Jake

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/33406773-debugging-with-generator-ng2-webpack-projects?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Update to angular2.rc-3

Angular 2 RC3 has been released 👍

Install Fails - [email protected] is no longer on npm

see facebook/react-native#6595

Provide a simple mechanism for running the docker container without npm

Currently the docker build still requires some version of npm/node to be working on the host machine.
It would be useful to reduce the requirements to just a working version of docker.

Build should enable prod mode

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.

Reduce number of dependencies

There are many dependencies resulting from merging other projects. The docker image is >400MB, as well, yo ng2-webpack takes a significant amount of time.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/33977114-reduce-number-of-dependencies?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Fix unit tests

9 passing (11s)
17 failing

ng2-webpack:app scaffolding creates expected files:

  AssertionError: spec-bundle.js, no such file or directory
  + expected - actual

  -false
  +true

  at node_modules/yeoman-assert/index.js:46:12
  at Array.forEach (native)
  at Function.assert.file (node_modules/yeoman-assert/index.js:44:8)
  at Context.<anonymous> (test/mocha/app.spec.js:65:20)

ng2-webpack:component with target type web creates expected files:

  AssertionError: client/scripts/dashboard/components/my-dummy/my-dummy.component.ts, no such file or directory
  + expected - actual

  -false
  +true

  at node_modules/yeoman-assert/index.js:46:12
  at Array.forEach (native)
  at Function.assert.file (node_modules/yeoman-assert/index.js:44:8)
  at Context.<anonymous> (test/mocha/component.spec.js:45:20)

ng2-webpack:component with target type web exposes valid client targets and client modules:
AssertionError: 'app' == undefined
at node_modules/yeoman-assert/index.js:214:12
at Array.forEach (native)
at Function.assert.objectContent (node_modules/yeoman-assert/index.js:208:24)
at Context. (test/mocha/component.spec.js:63:20)
ng2-webpack:component with target type fuse creates expected files:

  AssertionError: client/scripts/dashboard/components/my-dummy/myDummy.ts, no such file or directory
  + expected - actual

  -false
  +true

  at node_modules/yeoman-assert/index.js:46:12
  at Array.forEach (native)
  at Function.assert.file (node_modules/yeoman-assert/index.js:44:8)
  at Context.<anonymous> (test/mocha/component.spec.js:96:20)

ng2-webpack:directive creates expected files:

  AssertionError: client/scripts/dashboard/directives/my-dummy/my-dummy.directive.ts, no such file or directory
  + expected - actual

  -false
  +true

  at node_modules/yeoman-assert/index.js:46:12
  at Array.forEach (native)
  at Function.assert.file (node_modules/yeoman-assert/index.js:44:8)
  at Context.<anonymous> (test/mocha/directive.spec.js:39:16)

ng2-webpack:directive exposes valid client targets and client modules:
AssertionError: 'app' == undefined
at node_modules/yeoman-assert/index.js:214:12
at Array.forEach (native)
at Function.assert.objectContent (node_modules/yeoman-assert/index.js:208:24)
at Context. (test/mocha/directive.spec.js:53:16)
ng2-webpack:interface creates expected files:

  AssertionError: client/scripts/dashboard/interfaces/my-dummy/my-dummy.interface.ts, no such file or directory
  + expected - actual

  -false
  +true

  at node_modules/yeoman-assert/index.js:46:12
  at Array.forEach (native)
  at Function.assert.file (node_modules/yeoman-assert/index.js:44:8)
  at Context.<anonymous> (test/mocha/interface.spec.js:38:16)

ng2-webpack:interface exposes valid client targets and client modules:
AssertionError: 'app' == undefined
at node_modules/yeoman-assert/index.js:214:12
at Array.forEach (native)
at Function.assert.objectContent (node_modules/yeoman-assert/index.js:208:24)
at Context. (test/mocha/interface.spec.js:51:16)
ng2-webpack:ngux creates expected files:

  AssertionError: client/scripts/dashboard/components/my-dummy/myDummy.ts, no such file or directory
  + expected - actual

  -false
  +true

  at node_modules/yeoman-assert/index.js:46:12
  at Array.forEach (native)
  at Function.assert.file (node_modules/yeoman-assert/index.js:44:8)
  at Context.<anonymous> (test/mocha/ngux.spec.js:40:16)

ng2-webpack:ngux exposes valid client targets and client modules:
AssertionError: 'app' == undefined
at node_modules/yeoman-assert/index.js:214:12
at Array.forEach (native)
at Function.assert.objectContent (node_modules/yeoman-assert/index.js:208:24)
at Context. (test/mocha/ngux.spec.js:59:16)
ng2-webpack:pipe creates expected files:

  AssertionError: client/scripts/dashboard/pipes/my-dummy/my-dummy.pipe.ts, no such file or directory
  + expected - actual

  -false
  +true

  at node_modules/yeoman-assert/index.js:46:12
  at Array.forEach (native)
  at Function.assert.file (node_modules/yeoman-assert/index.js:44:8)
  at Context.<anonymous> (test/mocha/pipe.spec.js:39:16)

ng2-webpack:pipe exposes valid client targets and client modules:
AssertionError: 'app' == undefined
at node_modules/yeoman-assert/index.js:214:12
at Array.forEach (native)
at Function.assert.objectContent (node_modules/yeoman-assert/index.js:208:24)
at Context. (test/mocha/pipe.spec.js:54:16)
ng2-webpack:service creates expected files:

  AssertionError: client/scripts/dashboard/services/my-dummy/my-dummy.service.ts, no such file or directory
  + expected - actual

  -false
  +true

  at node_modules/yeoman-assert/index.js:46:12
  at Array.forEach (native)
  at Function.assert.file (node_modules/yeoman-assert/index.js:44:8)
  at Context.<anonymous> (test/mocha/service.spec.js:39:16)

ng2-webpack:service exposes valid client targets and client modules:
AssertionError: 'app' == undefined
at node_modules/yeoman-assert/index.js:214:12
at Array.forEach (native)
at Function.assert.objectContent (node_modules/yeoman-assert/index.js:208:24)
at Context. (test/mocha/service.spec.js:53:16)
ng2-webpack:target with valid web target creates expected files:

  AssertionError: client/scripts/dashboard-web, no such file or directory
  + expected - actual

  -false
  +true

  at node_modules/yeoman-assert/index.js:46:12
  at Array.forEach (native)
  at Function.assert.file (node_modules/yeoman-assert/index.js:44:8)
  at Context.<anonymous> (test/mocha/target.spec.js:41:20)

ng2-webpack:target with valid fuse target creates expected files:

  AssertionError: client/scripts/dashboard-web, no such file or directory
  + expected - actual

  -false
  +true

  at node_modules/yeoman-assert/index.js:46:12
  at Array.forEach (native)
  at Function.assert.file (node_modules/yeoman-assert/index.js:44:8)
  at Context.<anonymous> (test/mocha/target.spec.js:86:20)

ng2-webpack:target with invalid target should throw an error:
Error: timeout of 10000ms exceeded. Ensure the done() callback is being called in this test.

use of refs is an anti-pattern in react

refactor notification component integration to use props, see discussions: igorprado/react-notification-system#30
ngrx/store#131 (comment)

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/34803238-use-of-refs-is-an-anti-pattern-in-react?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Install https://github.com/valor-software/ng2-bootstrap global

Can i install bootstrap global [ Available for every view ] . Also I need to install http://fontawesome.io/ global .

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/34970736-install-https-github-com-valor-software-ng2-bootstrap-global?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Typings installation can fail during npm install when terminal is full-screen

Solution: Exit full-screen and re-run npm install.

SyntaxError: Invalid regular expression: /.{1,0}/: numbers out of order in {} quantifier.
at new RegExp (native)
at breakLines (/home/yeoman/client/node_modules/typings/node_modules/insight/node_modules/inquirer/lib/utils/screen-manager.js:108:15)
.
.
.
(/home/yeoman/client/node_modules/typings/node_modules/insight/node_modules/inquirer/node_modules/rx-lite/rx.lite.js:63:31)

Bower Components

Hello! I'm new with Webpack and Angular2 (so please forgive me if the following is a stupid question) and I need to use this JS library: FileSaver.js.

I know It is a Bower component and I have to edit the webpack.config.jsin order to make this kind of modules working in the environment of Webpack. I found this guide: link, but unfortunately the configuration structure seems to be different from the one I found in the guide (we have function makeWebpackConfig()insted of the plain configuration).

I inserted bower_components here (is it fine to do that?) and I added the importer and the plugin as well:

config.resolve = {
        cache: !isTestEnv,
        root: root("bower_components"),
        // only discover files that have those extensions
        extensions: prepend(['.ts','.js','.json','.css', '.scss', '.html'], '.async'), // ensure .async.ts etc also works
        alias: {
            'app': 'src/app',
            'common': 'src/common'
}

Then, in the vendor.ts I've done import 'file-saver.js', but for some reason is not working.

Any Idea?

Thanks!

Consider using the mocha reporter instead of the story reporter

The output has less noise and looks a bit cleaner.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/33978520-consider-using-the-mocha-reporter-instead-of-the-story-reporter?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Consider making the file naming convention configurable.

Let the user choose which file naming convention they want to adhere to.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/33978521-consider-making-the-file-naming-convention-configurable?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Abstract component test boilerplate

The angular boilerplate for a component unit test can be abstracted into an importable function to clean up spec files.

eg. spec.ts

/* beautify ignore:start */
import {it, inject, beforeEachProviders} from '@angular/core/testing';
import {TestComponentBuilder} from '@angular/compiler/testing';
import {SomeComponent} from './index';
import {Type} from '@angular/compiler/src/facade/lang';
/* beautify ignore:end */

// TODO : Should import this from somewhere rather than define it here
function itAsync<T>(name : string, type : Type, fn : (component : T, element : any) => void)
{        
    return it(name, inject( [TestComponentBuilder], (testComponentBuilder : TestComponentBuilder) => 
    {            
        return testComponentBuilder.createAsync(type).then(fixture => 
        {            
            fixture.detectChanges();                             
            fn(fixture.debugElement.componentInstance, fixture.debugElement.nativeElement);                            
        });
    })); 
}

describe('Component : Component', () => 
{
    beforeEachProviders(() => []);

    itAsync<SomeComponent>('should be defined', SomeComponent, (component, element) => 
    {
        expect(component).toBeDefined();
        expect(element).toBeDefined();
    });
});

Declare docker volumes via config

Volumes are currently declared via -v command-line arguments to docker run, making it difficult to add and remove files and directories when changes to the default configs for the image are needed.

"docker-start": "docker run --rm --name ${PWD##*/} -i -p 2368:2368 
-v $(pwd)/package.json:/home/yeoman/client/package.json 
-v $(pwd)/src:/home/yeoman/client/src 
-v $(pwd)/api:/home/yeoman/client/api 
cmelion/generator-ng2-webpack:latest"

The above would be fine, but the json format does not allow multi-line strings.

Investigate using docker-run:

{
  net: 'bridge',    // network mode (auto | host | bridge). defaults to bridge 
  tty: true,        // be a tty. defaults to false 
  fork: true,       // fork (do not attach stdio). defaults to false 
  remove: true,     // remove the container on stop. defaults to true 
  dns: ['8.8.8.8'], // set custom dns servers 
  ports: {
    8080: 8081      // expose container 8080 to host 8081 
  },
  volumes: {
    '/root': '/tmp', // expose container /root to host /tmp 
    '/root': '/tmp2:ro' // expose container /root to host /tmp2 as read only 
  },
  links: {
    'container-name': 'alias' // link container-name as alias 
  },
  env: {
    FOO: 'bar'      // set env vars 
  },
  entrypoint: '/bin/bash' // override entrypoint on container 
}

Configure webpack-dev-server and use HTML5 paths

In order to use HTML5 mode routing and support refresh on non-index routes, you have to configure your server to redirect every “missing” route to the root URL. Since this is the preferred mode in production, we should mirror that in the development environment.

Need to install jquery

What is best way to install jquery with jquey plugins generator-ng2-webpack ?

How to update current project with a new generator version?

Lets say I create a project with generator-ng2-webpack but then some time later generator gets updated. What is the best way to update the current project with the latest generator-ng2-webpack?

Production install impossible

On a fresh download, running "npm install --production" fails because the postinstall routine (that is unnecessary for production) calls on two dev dependencies.

Install fails with npm 3.8.2

Node 4.4.0
npm 3.8.2

Nothing works .

I got latest node and npm, I get countless errors, basically all typings related.
The ambientDependencies paths are not found, and when I do run npm run server I get:

ERROR in /Users/gplus/vm/angular2demo/node_modules/rxjs/operator/toPromise.d.ts
(7,59): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/rxjs/operator/toPromise.d.ts
(7,69): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/rxjs/operator/toPromise.d.ts
(9,9): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/rxjs/operator/toPromise.d.ts
(10,26): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/rxjs/operator/toPromise.d.ts
(10,36): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/rxjs/observable/PromiseObservable.d.ts
(40,31): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/rxjs/observable/PromiseObservable.d.ts
(41,26): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/platform/browser/browser_adapter.d.ts
(75,33): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/platform/dom/dom_adapter.d.ts
(85,42): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/platform/browser.d.ts
(78,90): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/http/url_search_params.d.ts
(11,16): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/http/headers.d.ts
(43,59): error TS2304: Cannot find name 'Map'.

ERROR in ./src/app/home/home.ts
(26,12): error TS2304: Cannot find name 'require'.

ERROR in ./src/app/home/home.ts
(28,13): error TS2304: Cannot find name 'require'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/common/directives/ng_class.d.ts
(72,35): error TS2304: Cannot find name 'Set'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/common/pipes/async_pipe.d.ts
(25,38): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/lifecycle/lifecycle_annotations.d.ts
(29,100): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/interfaces.d.ts
(21,107): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/interfaces.d.ts
(39,104): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/interfaces.d.ts
(57,109): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/interfaces.d.ts
(80,109): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/interfaces.d.ts
(102,114): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/directives/router_outlet.d.ts
(27,54): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/directives/router_outlet.d.ts
(33,51): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/directives/router_outlet.d.ts
(38,56): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/directives/router_outlet.d.ts
(47,65): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/directives/router_outlet.d.ts
(58,60): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/instruction.d.ts
(124,34): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/instruction.d.ts
(148,25): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/instruction.d.ts
(164,34): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/instruction.d.ts
(167,25): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/route_definition.d.ts
(20,20): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/route_definition.d.ts
(35,20): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/route_config/route_config_impl.d.ts
(101,19): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/route_registry.d.ts
(52,66): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/router.d.ts
(56,50): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/router.d.ts
(68,46): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/router.d.ts
(86,45): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/router.d.ts
(99,34): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/router.d.ts
(107,64): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/router.d.ts
(112,85): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/router.d.ts
(120,70): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/router.d.ts
(128,43): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/router.d.ts
(132,29): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/router.d.ts
(138,19): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/router/router.d.ts
(146,70): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/mock/mock_application_ref.d.ts
(16,33): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/compiler/xhr.d.ts
(6,23): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/compiler/xhr_mock.d.ts
(10,23): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/testing/test_component_builder.d.ts
(123,43): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/testing/matchers.d.ts
(4,37): error TS2503: Cannot find namespace 'jasmine'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/collection.d.ts
(1,25): error TS2304: Cannot find name 'MapConstructor'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/collection.d.ts
(2,25): error TS2304: Cannot find name 'SetConstructor'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/collection.d.ts
(4,27): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/collection.d.ts
(4,39): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/collection.d.ts
(7,9): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/collection.d.ts
(8,30): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/collection.d.ts
(11,43): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/collection.d.ts
(12,27): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/collection.d.ts
(14,23): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/collection.d.ts
(15,25): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/collection.d.ts
(100,41): error TS2304: Cannot find name 'Set'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/collection.d.ts
(101,22): error TS2304: Cannot find name 'Set'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/collection.d.ts
(102,25): error TS2304: Cannot find name 'Set'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts
(59,148): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts
(100,144): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts
(105,139): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts
(106,135): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/core/linker/component_resolver.d.ts
(8,53): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/core/linker/component_resolver.d.ts
(12,44): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/core/application_ref.d.ts
(38,88): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/core/application_ref.d.ts
(92,42): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/core/application_ref.d.ts
(151,33): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/rxjs/Observable.d.ts
(10,66): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/rxjs/Observable.d.ts
(66,60): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/rxjs/Observable.d.ts
(66,70): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/promise.d.ts
(2,14): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/promise.d.ts
(8,32): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/promise.d.ts
(9,38): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/promise.d.ts
(10,35): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/promise.d.ts
(10,93): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/promise.d.ts
(11,34): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/promise.d.ts
(11,50): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/promise.d.ts
(12,32): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/promise.d.ts
(12,149): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/promise.d.ts
(13,43): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/async.d.ts
(27,33): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/async.d.ts
(28,45): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/core/change_detection/differs/default_keyvalue_differ.d.ts
(23,15): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/core/change_detection/differs/default_keyvalue_differ.d.ts
(25,16): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/core/di/reflective_provider.d.ts
(103,123): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/core/di/reflective_provider.d.ts
(103,165): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/lang.d.ts
(4,17): error TS2304: Cannot find name 'Map'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/lang.d.ts
(5,17): error TS2304: Cannot find name 'Set'.

ERROR in /Users/gplus/vm/angular2demo/node_modules/angular2/src/facade/lang.d.ts
(71,59): error TS2304: Cannot find name 'Map'.

ERROR in ./src/vendor.ts
(7,22): error TS2304: Cannot find name 'process'.

ERROR in ./src/vendor.ts
(9,3): error TS2304: Cannot find name 'require'.

ERROR in ./src/vendor.ts
(11,3): error TS2304: Cannot find name 'Zone'.

ERROR in ./src/vendor.ts
(11,32): error TS2304: Cannot find name 'require'.

ERROR in ./src/vendor.ts
(14,22): error TS2304: Cannot find name 'process'.

ERROR in ./src/vendor.ts
(17,16): error TS2304: Cannot find name 'require'.

ERROR in ./src/main.ts
(6,27): error TS2305: Module '"/Users/gplus/vm/angular2demo/node_modules/angular2/router"' has no exported member 'LocationStrategy'.

ERROR in ./src/main.ts
(6,45): error TS2305: Module '"/Users/gplus/vm/angular2demo/node_modules/angular2/router"' has no exported member 'HashLocationStrategy'.

ERROR in ./src/main.ts
(20,26): error TS2304: Cannot find name 'process'.

ERROR in /Users/gplus/vm/angular2demo/src/app/home/providers/title.spec.ts
(10,1): error TS2304: Cannot find name 'describe'.

ERROR in /Users/gplus/vm/angular2demo/src/app/home/providers/title.spec.ts
(13,3): error TS2304: Cannot find name 'beforeEach'.

ERROR in /Users/gplus/vm/angular2demo/src/app/home/providers/title.spec.ts
(18,5): error TS2304: Cannot find name 'expect'.

ERROR in /Users/gplus/vm/angular2demo/src/app/home/directives/x-large.spec.ts
(30,9): error TS2304: Cannot find name 'expect'.

ERROR in /Users/gplus/vm/angular2demo/src/app/home/home.spec.ts
(34,5): error TS2304: Cannot find name 'expect'.

ERROR in /Users/gplus/vm/angular2demo/src/app/home/home.spec.ts
(38,5): error TS2304: Cannot find name 'expect'.

ERROR in /Users/gplus/vm/angular2demo/src/app/home/home.spec.ts
(42,5): error TS2304: Cannot find name 'spyOn'.

ERROR in /Users/gplus/vm/angular2demo/src/app/home/home.spec.ts
(43,5): error TS2304: Cannot find name 'expect'.

ERROR in /Users/gplus/vm/angular2demo/src/app/home/home.spec.ts
(46,5): error TS2304: Cannot find name 'expect'.

ERROR in /Users/gplus/vm/angular2demo/src/app/app.spec.ts
(12,1): error TS2304: Cannot find name 'describe'.

ERROR in /Users/gplus/vm/angular2demo/src/app/app.spec.ts
(19,5): error TS2304: Cannot find name 'expect'.

ERROR in /Users/gplus/vm/angular2demo/test/sanity-test.spec.ts
(9,1): error TS2304: Cannot find name 'describe'.

ERROR in /Users/gplus/vm/angular2demo/test/sanity-test.spec.ts
(11,5): error TS2304: Cannot find name 'expect'.

ERROR in /Users/gplus/vm/angular2demo/test/injector.spec.ts
(11,1): error TS2304: Cannot find name 'describe'.

ERROR in /Users/gplus/vm/angular2demo/test/injector.spec.ts
(13,5): error TS2304: Cannot find name 'expect'.

ERROR in ./src/vendor.ts
Module not found: Error: Cannot resolve module 'zone.js/lib/browser/zone-microtask' in /Users/gplus/vm/angular2demo/src
 @ ./src/vendor.ts 4:0-45

ERROR in ./src/vendor.ts
Module not found: Error: Cannot resolve module 'zone.js/lib/zones/long-stack-trace.js' in /Users/gplus/vm/angular2demo/src
 @ ./src/vendor.ts 8:33-81

ERROR in ./src/vendor.ts
Module not found: Error: Cannot resolve module 'github-api/github' in /Users/gplus/vm/angular2demo/src
 @ ./src/vendor.ts 20:0-28

Use Mocha for unit tests on client code

For consistency and familiarity reasons, most BE node teams are using Mocha, at least in the circles we travel in.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/31753488-use-mocha-for-unit-tests-on-client-code?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Add generator task for moving or renaming components, services and pipes.

yo ng2-webpack:move

prompts for:

module type
current module
destination (defaults to current location)
name (defaults to current name)

Ensure all dependencies are correctly updated.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/31556731-add-generator-task-for-moving-or-renaming-components-services-and-pipes?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Update to angular2.rc-2

Angular 2 RC2 has been released.

UNMET PEER DEPENDENCY [email protected]

├── UNMET PEER DEPENDENCY [email protected]
└── [email protected] extraneous

Issue does not prevent generator or app from functioning as expected.

see:
angular/angular#7618

is there a reason why index.html has multiple DOCTYPE declarations?

as you can see there are two lines at the bottom, which seem to be redundant:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="icon" type="image/x-icon" href="img/favicon.ico">
    <title>ng2-webpack</title>
    <base href="./">
  </head>
  <body>
    <app>Loading...</app>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">

Image path dev vs production build directory

Hi I'm still getting used to webpack and the workflow so I'm not sure if it's an issue or if i'm going about it the wrong way.
I'd like to have a dev image path url and a different url path when i go to build for the production server.

For example:
While DEV'ing (npm start):

<img src="./img/logo.png" alt="">

and
BUILD (npm run build):

<img src="/angular/dist/img/logo.png" alt="">

Now, i've successfully updated the publicPath to properly build the css and js paths:

    config.output = isTestEnv ? {} : {
        path: root('dist'),
        publicPath: ENV === 'build' ? '/angular/dist/' : '',
        ...
    };

but that had no affect on my image paths.

Am I missing something here?

Thanks, for any help.

Add sub-generator for React components

A sample React component integration has been added to the Home component.
There are a ton of nice React widgets out there so why not use them?
As a complete framework Angular 2.0 makes a great hosting environment for any view component and that includes React.

Provide a sub-generator to produce a NG2 wrapper component in the form of a TSX file.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/31774430-add-sub-generator-for-react-components?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Offer The appCache Nanny as a caching strategy option during project generation

The current strategy is to use cache busting configured in webpack config:

   config.output = isTestEnv ? {} : {
       path: root('dist'),
       publicPath: '',
       filename: ENV === 'build' ? 'js/[name].[hash].js' : 'js/[name].js',
       chunkFilename: ENV === 'build' ? '[id].[hash].chunk.js' : '[id].chunk.js',
   };

AppCache is more efficient and adds offline capabilities, appCache Nanny adds workarounds for the less desirable caching behaviors appCache exhibits.

https://github.com/gr2m/appcache-nanny

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/32249829-offer-the-appcache-nanny-as-a-caching-strategy-option-during-project-generation?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

Build and publish a docker image [$100]

see https://github.com/cmelion/generator-ng2-webpack/wiki/Why-Docker%3F

--- Did you help close this issue? Go claim the **[$100 bounty](https://www.bountysource.com/issues/31789904-build-and-publish-a-docker-image?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** on [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

api folder in wrong place

the new added api folder is located outside templates and this prevents the generator form continue, and this folder should be located inside templates folder

Importing lodash

I have installed typings for lodash and included import 'lodash'; in vendors.ts, the app works, but in Visual Studio Code I get an error saying, that _ cannot be found.

I've tried importing lodash at the beginning of the file that needs it, but to no avail. import 'lodash'; at the top does nothing, whereas import * as _ from 'lodash'; leads to no error in VSCode, but an unresolved module in Angular2.

How to get rid of that error message and properly import lodash?

http issue

I am getting an error when I am using below code to access rest API,

ORIGINAL EXCEPTION: TypeError: platform_browser_1.platform_browser_private.getDOM(...).getCookie is not a function

import {Component, OnInit, Injectable} from '@angular/core';
import {FORM_DIRECTIVES} from '@angular/common';
import {Http, Headers} from '@angular/http';

import {Api} from '../../services/api';

@component({
selector: 'home',
directives: [...FORM_DIRECTIVES],
providers: [Api],
pipes: [],
styles: [require('./style.scss')],
template: require('./template.html')
})
@Injectable()
export class Home implements OnInit {

constructor(http: Http) {
    this.http = http;
}

createAuthorizationHeader(headers: Headers) {
    headers.append('Authorization', 'Basic ' +
        btoa('username:password'));
}

getRandom() {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    return this.http.get('http://localhost:3000/items', {
        headers: headers
    });
}

post(url, data) {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    return this.http.post('http://localhost:3000/items', data, {
        headers: headers
    });
}


ngOnInit() {
    console.log('Hello Home');
}

}

but when I use below code it works perfectly.

fetch('http://localhost:3000/items').then((response) => {
return response.json();
}).then((data) => {

        console.log(data);

    }).catch((ex) => {
        console.error('Error fetching users', ex);
    });

but I want to use 1st function since I have to pass header values.

How can I solve it.

Thanks