born2net / angular-kitchen-sink Goto Github PK

View Code? Open in Web Editor NEW

754.0 61.0 146.0 3.97 MB

:rocket: Angular - learn by example

Home Page: http://ng.javascriptninja.io

JavaScript 9.32% HTML 7.84% TypeScript 77.02% CSS 5.82%

angular-kitchen-sink's Introduction

Angular kitchen sink

The Ultimate Angular kitchen sink Single Page App, because code samples are always better than docs!

Check this working demo: http://secure.digitalsignage.com/boiler

Cherry pick the snippets you like and use the code to see just what's possible with the awesomeness of Angular

to install::

git clone https://github.com/born2net/Angular-kitchen-sink.git
cd Angular-kitchen-sink
npm install
open browser to http://localhost:4201/

What features of Angular does this app cover? everything:

- Gulp tasks for dev / prod, doc gen and more
   - use: gulp developer (to debug in real time (i.e.: compile TS in the browser and work close to the metal)
   - use: gulp development --restart (see below on details for best performance debugging)
   - use: gulp production (see below on details for server directory setup)
- ng-bootstrap components (https://github.com/valor-software/ngx-bootstrap)
- Support the awesomeness of Redux DevTool with live time travel (http://goo.gl/PNG5nV)
- Immutable.js (https://facebook.github.io/immutable-js/) Todo component with: 
   - backend server sync   
   - Extend Base class StoreModel makes working with Immutable.js a breeze and use the power of Typing
   - Using factory to always create immutable typed instances of a class
- Lazy loading with router (ngModules)
- Use modules with ANALYZE_FOR_ENTRY_COMPONENTS to allow for AOT component registration
- Sharing a global AuthService when loading via Feature module as well as when loading via Lazy route
- Highcharts directive wrapper (http://www.highcharts.com) 
- StarWars movie shop powered by Redux store
- ng-redux using multiple examples of deep selection to bind to specific  reducer / values
- ng-redux with epics and switching streams on the fly (ping/pong) 
- Pass custom styles to components via ngStyle and custom properties
- Pass in custom stylles via input and evaluate in component
- jQuery integration the Angular way via BrowserDomAdapter
- Access native HTML elements like <input> by inserting identifiers (i.e.: #anotherWayToGetInput)
- CommBroker dependency service, value sharing / mediator design pattern
- Custom @Decorator (@StyleDecorator) for components
- Custom decorators style, log, thorttle, observable log, page, once, visit, retry, auto unsubs and others
- Component is passed in style via inputs and evaluates (light class)
- Component is styled using deep css selector from parent component (border)
- Use EventEmitter.observers and show element only when (onMyEvent) is bound to
- Use HTML5 CustomEvent to pass data to ancestor parent components via bubbling event 
- Use ngDoCheck with a combination of IterableDiffer or KeyValueDiffers to know when specific inputs to a component changed
- LocalStorage service
- Global Consts for event and vars registration
- Responsive design (on size change Angular components will react)
- Creation of a Component's Template from Dynamic HTML fragment (notes5)
- Creation of a Component's Template from component content
- Creation of a Component's Template without synthetic suga
- Create module dynamically and its declared components at runtime via compileModuleAndAllComponentsSync
- Create component dynamically at runtime and pass in template (tooltip)
- Use templateRef instead of ng-content for content projection
- Multi slot transclusion
- RXjs powered Custom HTTP class that extends the default Http ng to add new behaviour
- Rxjs reactive operators and subscribers throughout the app (some random examples as well)
- Rxjs Change detection strategy for improved rendering of page (OnPushObserve)
- Rxjs Node server side CRUD for Observable client to server calls
- Rxjs... lots more of it...
- Use ANALYZE_FOR_ENTRY_COMPONENTS as part of ngModule provider so we can skip entryComponents
- Different ways to load and inject dynamic components (see Notes3 component)
- Import template into a component as a runtime string
- Create your own custom \*NgBookIf and \*ngBookRepeat directives with createEmbeddedView
- Force change detection via ref.markForCheck();
- Embedded SVG component
- Greensock SVG animation
- ngAnimate SVG
- Lots of standalone components such as Modal, Sliders, Todo, Tabs and more
- Shared state (Side menu and file menu)
- use module.moduleName inside component to be able to reference files paths locally (Notes1.ts)
- use contentWrap.childNodes.length to provide a default template to component if not provided by consumer
- use ngTemplateOutlet to pass in template and use $implicit for values</h4>
- use lazy loading of components when router enters path (NoteDynamic, kind of like require(...))
- manage app version by injecting from package.json and gulp bumping on release 
- Extend the Date pipe with custom implementation
- Extend the http service with an Http interceptor service
- ngAnimation
    - router animation
    - enter / leave states
    - default any / void animations 
- Dependency injection and decorators such as @Host
- Advanced decorators such as @HostListener @ContentChildren @Injectable and more
- Provide data to *ngFor declaratively via @ContentChildren
- Provide components to *ngFor declaratively via @ContentChildren
- Using @CanActivate we prevent user from accessing routes if not authenticated (checkout AppInjService)
- Using @CanDeactivate to demo user prompting when navigating away from a url route segment
- trackBy to create a custom identifier for *ngFor (trackBy:identify)
   - use nodeLogger to show ToDo items are only updated and not re-created when using our own identifier method
- Error handler service overrides ng error handling and provide custom options
- Dependency sharing
- Hook into application lifecycles
- Form and validation (both via FormBuilder and manual creating Control Groups)
- Form member access via contnetChild @optional
- Generic implemntation, based classed of a form NG_VALUE_ACCESSOR (hexadecimal  form component)
- Use ng-container is a generic substitute to a none element (like template)
- Custom validators such as PasswordMatch (@Attribute)
- Form observables and operations including Async piping and more
- Form promised based field validation
- Form custom counter component compatible with both template and model forms
- Todo data model persistence and sync to node server via CRUD (node CRUD end point server side included)
- Subclass / Inheritance ES6 (Notes component) 
- Static shared lib and single reference file
- Theme service (supports 2 themes including Lite and Dark)
- Pipes including grid sort and character counter
- Use reflection to automatically show a component's name, super useful for debugging component location in page
- Interfaces
- TypeScript ype guard example via interfaces (IPet, IWildAnimal)
- UI data binding / uni and 2 way
- Document generation
- and much more...

if you are on a Windows environment I highly recommend you work with: http://cmder.net as well as https://www.cygwin.com

Looking for even more?

ng-skeleton, the ultimate angular seed project: https://github.com/born2net/ng-skeleton
checkout this enterprise level angular app that's forked off this project: https://github.com/born2net/studioDashboard

Videos:

angular-kitchen-sink's People

Contributors

Stargazers

Watchers

Forkers

quinntynebrown nathanwalker easyfmxu longfeili wilfredlemus wolfganggoedel liveforeverx rjxjr66 bertrandg amirtoole datalinkdev devil1991 mfrohberg nakolkin majdisahbani david-lee tstirrat15 enterprisewide ihorskyi c11 rosshinkley davidfang darocha java-tools danieltaborda deepakgd rahulvramesh android-sos tuanquynet javatrending mvenin hanss bubbleleaf ladeng8888 matt-psaltis itainteasy iblanked lynsei atlasicus lenincasco kashifmsidd jakeniemiec rahman-s-m jsc-it farrukhjon hbcodexci padamshrestha brainacadem jbgraug guanglongdu tomjal saeeansari hazizkhan renanmorais maheshchari kilaparthiramu mshahin364 flolovebit gxerxes amrayoub ypkkhatri ilyaandr brajput24 sangupandi diansigit bengelsdorff xiongdg guillezc aasee soupman99 warash h4ki syshamed areebaaroosh robertomalatesta mexarm stevonakic pk-karthik devdcores shazom zaengler fvelosa kptncaveman transcordia brijmcq thanhtrungit25 ryu-powderhorn pinro nathane2005 satish-verma suggy75 valdezm abrahamgit dimajoyti rajanjs mana666 learningsatty vermuz truedeity sachinarora87

angular-kitchen-sink's Issues

ng-mslib/dist/index has no exported member 'Ngmslib

Windows 10, node v6.9.1, npm v3.10.8, So I get a Module Failed

CSS is not working properly in App1 TODO1 Component

Todos created are hidden and the whole thing it seems like it is not working. Can you please fix this?

Errors on Ubuntu

Here is my ec2 instance

uname -a
Linux ip-172-31-53-90 3.13.0-74-generic #118-Ubuntu SMP Thu Dec 17 22:52:10 UTC 2015 x86_64 x86_64 x86_64 GNU/Linux

node -v
v5.7.0

npm -v
3.6.0

gulp -v
[12:05:08] CLI version 3.9.1
[12:05:08] Local version 3.9.1

and my attempt to run (used sudo just in case...)

:~/ng2Boilerplate$ sudo gulp production
[11:57:31] Using gulpfile ~/ng2Boilerplate/gulpfile.js
[11:57:31] Starting 'production'...
[11:57:31] Starting 'x_clean'...
[11:57:31] Finished 'x_clean' after 171 ms
[11:57:31] Starting 'x_assets'...
[11:57:31] Finished 'x_assets' after 21 ms
[11:57:31] Starting 'x_copy_files'...
[11:57:36] Finished 'x_copy_files' after 5.02 s
[11:57:36] Starting 'x_build-ts'...
/home/ubuntu/ng2Boilerplate/node_modules/angular2/src/facade/promise.d.ts(1,10): error TS2661: Cannot re-export name that is not defined in the module.
src/App.ts(6,28): error TS2307: Cannot find module 'immutable'.
src/comps/app1/todos/reducers/TodoReducer.ts(1,20): error TS2307: Cannot find module 'immutable'.
src/models/StoreModel.ts(1,19): error TS2307: Cannot find module 'immutable'.
src/reducers/AppdbReducer.ts(1,19): error TS2307: Cannot find module 'immutable'.
src/reducers/NotifyReducer.ts(1,19): error TS2307: Cannot find module 'immutable'.
src/services/AuthService.ts(4,14): error TS2503: Cannot find namespace 'Immutable'.
/home/ubuntu/ng2Boilerplate/typings/app.d.ts(26,1): error TS6053: File '/home/ubuntu/ng2Boilerplate/node_modules/immutable/dist/Immutable.d.ts' not found.
[11:57:45] TypeScript: 8 semantic errors
[11:57:45] TypeScript: emit succeeded (with errors)
[11:57:45] Finished 'x_build-ts' after 8.47 s
[11:57:45] Starting 'x_copy'...
[11:57:45] Finished 'x_copy' after 988 μs
[11:57:45] Starting 'x_bundle'...
     Building the single-file sfx bundle for src/App.js...

err  Error: ENOENT: no such file or directory, open '/home/ubuntu/ng2Boilerplate/jspm_packages/github/frankwallis/[email protected]'
         at Error (native)
        Error loading file:///home/ubuntu/ng2Boilerplate/jspm_packages/github/frankwallis/[email protected]
[11:57:46] 'x_bundle' errored after 923 ms
[11:57:46] Error: Command jspm bundle-sfx src/App.js ./dist/index.js --skip-source-maps failed with exit code 1
    at ChildProcess.exithandler (child_process.js:202:12)
    at emitTwo (events.js:100:13)
    at ChildProcess.emit (events.js:185:7)
    at maybeClose (internal/child_process.js:827:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
An error occured in task 'x_bundle'.
[11:57:46] 'production' errored after 15 s
[11:57:46] Error in plugin 'run-sequence'
Message:
    An error occured in task 'x_bundle'.

does not remember place when refreshing screen

Greetings,

If I'm in a given page: e.g. http://localhost:8080/src/public/AppManager
the application works, but when the browser's refresh button is selected,
I receive the following error:

Cannot GET /src/public/AppManager

how do I enable this?
Thank you.

Clean clone - AOT errors

First, I've watched your Youtube, very (extremely) nice.... THNX

But when ng serve --port 4203 --aot true

It starts spitting out some errors - any suggestions?

This is more a gulp configuration question than anything else. Ideally, I'd like to run the app from the root domain and not from a sub-directory like src/public/index.html. I want to be able to go to localhost:8080 and have the gulp configuration use /src/public as doc root. This way I mimic a production environment closer.

Is that something that's easy to do with your setup?

Thank you

Failed to load resource... 404 Not found (Typescript issue?)

When running with npm run devserver I get several errors "Failed to load resource..." for ts files.

The problem is with filename's case. For example, trying to load src/comps/sidemenu/Menu.ts but the file is in lowercase .../menu.ts.

Maybe a typescript issue? (I'm using 2.0.0-dev.20160628)

How to fix this?

gulp LiveServer not working

I get error when start hte application via

gulp LiveServer

Error:

[10:11:22] Finished '_watchSource' after 369 ms
[10:11:22] Starting 'LiveServer'...
[10:11:22] Finished 'LiveServer' after 77 ms
events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: listen EACCES 0.0.0.0:8003
    at Object.exports._errnoException (util.js:874:11)
    at exports._exceptionWithHostPort (util.js:897:20)
    at Server._listen2 (net.js:1221:19)

Trying it on Windows server.
Maybe it has todo with

$ npm install
npm WARN optional dep failed, continuing [email protected]
npm WARN optional dep failed, continuing [email protected]
npm WARN deprecated [email protected]: lodash@<2.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
npm WARN engine [email protected]: wanted: {"node":">= 0.10.0 <= 0.11.0"} (current: {"node":"4.2.3","npm":"2.14.7"})
npm WARN peerDependencies The peer dependency es6-promise@^3.0.2 included from angular2 will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency [email protected] included from angular2 will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\srv\\node\\node.exe" "C:\\srv\\node\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v4.2.3
npm ERR! npm  v2.14.7
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected]

npm ERR! Please include the following file with any support reques

npm install typescript@next --save

I came here to get a working angular 2 boilerplate because even when following the official tutorial it breaks because of dependency madness...

However, following your instruction on installing, I got these errors when doing
npm install typescript@next --save:

[email protected] /Users/timobehrens/Dev/angularjs/ng2Boilerplate
├── UNMET PEER DEPENDENCY [email protected] invalid
└── UNMET PEER DEPENDENCY [email protected] invalid
npm WARN EPEERINVALID @angular/[email protected] requires a peer of [email protected] but none was installed.
npm WARN EPEERINVALID @angular/[email protected] requires a peer of [email protected] but none was installed.
npm WARN EPEERINVALID @angular/[email protected] requires a peer of [email protected] but none was installed.
npm WARN EPEERINVALID [email protected] requires a peer of [email protected] but none was installed.
npm WARN EPEERINVALID [email protected] requires a peer of typescript@>=1.7.3 but none was installed.
npm ERR! code 1

Create a `Skeleton` branch.

Idea taken from a proprietary, pay to access, AngularJS template repo (more info here). They have a branch called Skeleton which includes everything from master branch except the demo content. "Ideal for quickly start creating your app without worrying about cleaning up the demos.". This could be very useful for this project to have.

Failure when running 'gulp production'

Hi,

I love this github project! Thank you for making it.

When I was looking at building this to production so I typed 'gulp production'.

This is what I got:

| => gulp production
[15:27:07] Using gulpfile ~/git/ng2Boilerplate/gulpfile.js
[15:27:07] Starting 'production'...
[15:27:07] Starting 'x_clean'...
[15:27:07] Finished 'x_clean' after 12 ms
[15:27:07] Starting 'x_assets'...
[15:27:07] Finished 'x_assets' after 59 ms
[15:27:07] Starting 'x_copy_files'...
[15:27:16] Finished 'x_copy_files' after 8.07 s
[15:27:16] Starting 'x_build-ts'...
[15:27:21] Finished 'x_build-ts' after 5.61 s
[15:27:21] Starting 'x_copy'...
[15:27:21] Finished 'x_copy' after 907 μs
[15:27:21] Starting 'x_bundle'...
     Building the bundle tree for src/App.js...

err  Error on fetch for ng2Boilerplater/App.js.ts at file:///Users/crash/git/ng2Boilerplate/src/App.js.ts
  Error: ENOENT: no such file or directory, open '/Users/crash/git/ng2Boilerplate/src/App.js.ts'
    at Error (native)
[15:27:25] 'x_bundle' errored after 3.75 s
[15:27:25] Error: Command `jspm bundle src/App.js ./dist/index.js --skip-source-maps` failed with exit code 1
    at ChildProcess.exithandler (child_process.js:206:12)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Socket.<anonymous> (internal/child_process.js:334:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:493:12)
Command `jspm bundle src/App.js ./dist/index.js --skip-source-maps` failed with exit code 1
[15:27:25] 'production' errored after 18 s
[15:27:25] Error in plugin 'run-sequence(x_bundle)'
Message:
    Command `jspm bundle src/App.js ./dist/index.js --skip-source-maps` failed with exit code 1
Details:
    killed: false
    code: 1
    signal: null
    cmd: jspm bundle src/App.js ./dist/index.js --skip-source-maps
    stdout:      Building the bundle tree for src/App.js...

    stderr: 
err  Error on fetch for ng2Boilerplater/App.js.ts at file:///Users/crash/git/ng2Boilerplate/src/App.js.ts
  Error: ENOENT: no such file or directory, open '/Users/crash/git/ng2Boilerplate/src/App.js.ts'
    at Error (native)

Stack:
Error: Command `jspm bundle src/App.js ./dist/index.js --skip-source-maps` failed with exit code 1
    at ChildProcess.exithandler (child_process.js:206:12)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Socket.<anonymous> (internal/child_process.js:334:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:493:12)

Could use help in moving to beta.1

Tried to move the project to beta.1 and got some errors with dependency injection and from a quick look it seems to be bugs related to ng2 latest beta.1 .... BUT I didn't dive deep yet!

If anyone has some time and can assist would be appreciated..

Sean

Build problem with latest

Node - 6.9.2
NPM - 4.0.3

Cloned a fresh repo at commit 363fd4

Run npm install

> [email protected] postinstall <myproject>
> npm run dev


> [email protected] dev <myproject>
> ng serve --port 4201 --aot false

fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
** NG Live Development Server is running on http://localhost:4201. **
Hash: cc91f52d4496fb82de07                                                                 
Time: 41980ms
chunk    {0} main.bundle.js, main.bundle.map (main) 505 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.map (styles) 218 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 6.73 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in <myproject>/node_modules/@types/lodash/index.d.ts (11587,21): ']' expected.
<myproject>/node_modules/@types/lodash/index.d.ts (11587,22): ';' expected.

100 more lodash errors

ERROR in <myproject>/src/app/app.module.ts (359,9): Supplied parameters do not match any signature of call target.
<myproject>/src/app/app.module.ts (359,29): Supplied parameters do not match any signature of call target.

ERROR in Error encountered resolving symbol values statically. Calling function 'ToastOptions', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in <myproject>/src/app/app.module.ts, resolving symbol AppModule in <myproject>/src/app/app.module.ts, resolving symbol AppModule in <myproject>/src/app/app.module.ts
webpack: Failed to compile.

`gulp production` fails with `An error occured in task 'x_bundle'`

$ gulp production fails with An error occured in task 'x_bundle'

✘ jakeniemiec@Sat  ~/RubymineProjects/ng2Boilerplate   master ●  gulp production
[15:30:17] Using gulpfile ~/RubymineProjects/ng2Boilerplate/gulpfile.js
[15:30:17] Starting 'production'...
[15:30:17] Starting 'x_clean'...
[15:30:17] Finished 'x_clean' after 128 ms
[15:30:17] Starting 'x_assets'...
[15:30:17] Finished 'x_assets' after 18 ms
[15:30:17] Starting 'x_copy_files'...
[15:30:23] Finished 'x_copy_files' after 6.3 s
[15:30:23] Starting 'x_build-ts'...
src/comps/logo/Logo.ts(38,31): error TS2339: Property 'of' does not exist on type 'typeof Observable'.
src/comps/logo/Logo.ts(41,31): error TS2339: Property 'of' does not exist on type 'typeof Observable'.
src/services/CustomHTTP.ts(27,14): error TS2339: Property 'retryWhen' does not exist on type 'Observable<Response>'.
src/services/CustomHTTP.ts(48,14): error TS2339: Property 'finally' does not exist on type 'Observable<any>'.
src/services/WikiService.ts(15,14): error TS2339: Property 'toPromise' does not exist on type 'Observable<Response>'.
[15:30:26] TypeScript: 5 semantic errors
[15:30:26] TypeScript: emit succeeded (with errors)
[15:30:26] Finished 'x_build-ts' after 3.02 s
[15:30:26] Starting 'x_copy'...
[15:30:26] Finished 'x_copy' after 576 μs
[15:30:26] Starting 'x_bundle'...
     Building the bundle tree for src/App.js...

err  Source ng2Boilerplater/App.js has multiple anonymous System.register calls.

[15:30:27] 'x_bundle' errored after 1.35 s
[15:30:27] Error: Command `jspm bundle src/App.js ./dist/index.js --skip-source-maps` failed with exit code 1
    at ChildProcess.exithandler (child_process.js:202:12)
    at emitTwo (events.js:100:13)
    at ChildProcess.emit (events.js:185:7)
    at maybeClose (internal/child_process.js:850:16)
    at Socket.<anonymous> (internal/child_process.js:323:11)
    at emitOne (events.js:90:13)
    at Socket.emit (events.js:182:7)
    at Pipe._onclose (net.js:475:12)
An error occured in task 'x_bundle'.
[15:30:27] 'production' errored after 11 s
[15:30:27] Error in plugin 'run-sequence'
Message:
    An error occured in task 'x_bundle'.
 ✘ jakeniemiec@Sat  ~/RubymineProjects/ng2Boilerplate   master ● 

jspm install systemjs-hot-reloader --dev

Hello
I am trying to build this boilerplate.
When I
jspm install systemjs-hot-reloader --dev
I get

http://ng.javascriptninja.io/ is unavailable

gulp production

I believe I may be missing something simple, everything is working Except when I try to do the production build.

I have followed all directions on the md

so I am on a win7 box and deploying to IIS (I have tries AWS as well in Docker container to no avail -- both give me the same result)

looking at the dist folder==> there is no assets directory, which I believe is causing a lot of the headache (it is, however, inside /public/assets/)
going to App.html
gives me a basic html page (toggle navigation button, then two links that do nothing)
Console shows this (which leads to my believe that assets is going in the wrong place, but even pushing it to root has no effect

 Failed to load resource: the server responded with a status of 404 (Not Found)
 http://**/assets/us.png Failed to load resource: the server responded with a status of 404 (Not Found)
 http://**.elasticbeanstalk.com/assets/preload5.gif Failed to load resource: the server responded with a status of 404 (Not Found)

if I go to /public/ I see the below in the console. (it starts to work but fails and never goes past the loading screen)

system.src.js:1051 GET http://localhost:801/jspm_packages/github/systemjs/[email protected] 404 (Not Found)G @ system.src.js:1051(anonymous function) @ system.src.js:1778(anonymous function) @ system.src.js:1777(anonymous function) @ system.src.js:2806(anonymous function) @ system.src.js:3384(anonymous function) @ system.src.js:3707(anonymous function) @ system.src.js:4099(anonymous function) @ system.src.js:4562(anonymous function) @ system.src.js:4831(anonymous function) @ system.src.js:407
(index):46 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:801/jspm_packages/github/systemjs/[email protected](…) "error system.js Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:801/jspm_packages/github/systemjs/[email protected]
	Error: XHR error (404 Not Found) loading http://localhost:801/jspm_packages/github/systemjs/[email protected]
	Error loading http://localhost:801/jspm_packages/github/systemjs/[email protected]
	Error loading http://localhost:801/src/App.js"(anonymous function) @ (index):46
:801/src/styles/fonts/Raleway.woff2:1 GET http://localhost:801/src/styles/fonts/Raleway.woff2

I have followed these directions from the MD

git clone https://github.com/born2net/Angular-kitchen-sink.git
cd Angular-kitchen-sink
npm install -g jspm@beta
npm install -g gulp
npm install
npm install typescript
npm install chokidar-socket-emitter --save-dev
npm install http-server --save-dev
jspm install systemjs-hot-reloader --dev

gulp development & npm run devserver
works like a champ

gulp production
(removed "x_clear_remote",
"x_rsync",
"x_rsync") --> just doing a manual deployment out of /dist/ right now

I love the samples, but my main issue right now is getting a reliable build/bundling tool for NG2 and I keep stumbling! Hope my noob issues are easy for you to resolve.

Peer dependencies not met Typescript@next

>npm install typescript@next --save

Cannot get it to install

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\dev\\nodejs\\node.exe" "C:\\dev\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "typescript@next" "--save"
npm ERR! node v4.4.5
npm ERR! npm  v2.15.5
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer @angular/[email protected] wants [email protected]
npm ERR! peerinvalid Peer @angular/[email protected] wants [email protected]
npm ERR! peerinvalid Peer @angular/[email protected] wants [email protected]

npm ERR! Please include the following file with any support request:

npm install && gulp development...

D:\meanproject\ng2Boilerplate>node --version
v5.10.1

D:\meanproject\ng2Boilerplate>npm --version
3.8.3

D:\meanproject\ng2Boilerplate>
SVG's SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
logger.js:20 TypeScript transpiling to CommonJS, consider setting module: "system" in typescriptOptions to transpile directly to System.register format
browser_adapter.ts:88EXCEPTION: RangeError: Maximum call stack size exceeded
browser_adapter.ts:78EXCEPTION: RangeError: Maximum call stack size exceededBrowserDomAdapter.logError @ browser_adapter.ts:78
browser_adapter.ts:78STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:78
browser_adapter.ts:78RangeError: Maximum call stack size exceeded
at e.scheduleTask (zone.min.js:1)
at e.scheduleMicroTask (zone.min.js:1)
at h (zone.min.js:1)
at e.then as __zone_symbol__then
at n (zone.min.js:1)
at r (zone.min.js:1)
at e.scheduleTask (zone.min.js:1)
at e.scheduleMicroTask (zone.min.js:1)
at h (zone.min.js:1)
at e.then as __zone_symbol__thenBrowserDomAdapter.logError @ browser_adapter.ts:78
index.html:31 Error: EXCEPTION: Error during instantiation of ApplicationRef_! (ApplicationRef -> ApplicationRef_).(…) "error system.js Error: EXCEPTION: Error during instantiation of ApplicationRef_! (ApplicationRef -> ApplicationRef_).
ORIGINAL EXCEPTION: RangeError: Maximum call stack size exceeded
ORIGINAL STACKTRACE:
RangeError: Maximum call stack size exceeded
at e.scheduleTask (http://localhost:8080/jspm_packages/npm/[email protected]/dist/zone.min.js:1:7777)
at e.scheduleMicroTask (http://localhost:8080/jspm_packages/npm/[email protected]/dist/zone.min.js:1:5493)
at h (http://localhost:8080/jspm_packages/npm/[email protected]/dist/zone.min.js:1:3406)
at e.then as __zone_symbol__then
at n (http://localhost:8080/jspm_packages/npm/[email protected]/dist/zone.min.js:1:2197)
at r (http://localhost:8080/jspm_packages/npm/[email protected]/dist/zone.min.js:1:2226)
at e.scheduleTask (http://localhost:8080/jspm_packages/npm/[email protected]/dist/zone.min.js:1:7736)
at e.scheduleMicroTask (http://localhost:8080/jspm_packages/npm/[email protected]/dist/zone.min.js:1:5493)
at h (http://localhost:8080/jspm_packages/npm/[email protected]/dist/zone.min.js:1:3406)
at e.then as __zone_symbol__then
Evaluating http://localhost:8080/src/App.ts
Error loading http://localhost:8080/src/App.ts"

Fix 'No provider for ToastsManager!' error

in app.module.ts line 359 needs to be changed to ToastModule.forRoot(),

ng2Boilerplate: now powered by jspm (disc Webpack) and loving it!!!

ng2Boilerplate: now powered by jspm (dropped Webpack) and loving it!!!
release today... + lots of new things such as Immutable powered ToDo and more...

Give jspm a try and you'll NEVER look back... compiling TS in the browser is awesome and gives you real time dev experience...

enjoy!

npm install and run......doesn't work

Failed to load resource: the server responded with a status of 404 (Not Found)
system.js:4 Uncaught (in promise) Error: Error: XHR error (404 Not Found) loading http://localhost:9089/jspm_packages/github/twbs/[email protected](…)

What about adding Angular Universal to the mix of goodies?

gulp production result in error while x_bundle

Hi,

for your information. I get following error if i try to use gulp production on an fresh installed project:

     Building the bundle tree for src/App.js...

err  Error on fetch for ng2Boilerplater/App.js.ts at file:///C:/Users/Admin/.angular2/front/src/App.js.ts
  Error: ENOENT: no such file or directory, open 'C:\Users\Admin\.angular2\front\src\App.js.ts'
    at Error (native)

This App**.js.ts** is somehow strange.
It seems like it is a bug comming with jspm 0.17+. I tried the other gulp x_bundle task by commenting out the new one for 0.17+ and activating the old one for jspm 0.16 in the gulpfile.js
It is passing the x_bundle task somehow. I commented out the "rsync" task. It now finished the production sequence. But, in the result I get this errors.

[04:39:38] Starting 'production'...
[04:39:38] Starting 'x_clean'...
[04:39:39] Finished 'x_clean' after 446 ms
[04:39:39] Starting 'x_assets'...
[04:39:39] Finished 'x_assets' after 79 ms
[04:39:39] Starting 'x_copy_files'...
[04:39:52] Finished 'x_copy_files' after 13 s
[04:39:52] Starting 'x_build-ts'...
[04:40:01] Finished 'x_build-ts' after 8.78 s
[04:40:01] Starting 'x_copy'...
[04:40:01] Finished 'x_copy' after 1.6 ms
[04:40:01] Starting 'x_bundle'...

err  bundle-sfx has been renamed to build.
  Use jspm build src/App.js ./dist/index.js --skip-source-maps
[04:40:02] Finished 'x_bundle' after 1.26 s
[04:40:02] Starting 'x_minify'...
[04:40:02] Finished 'x_minify' after 2.03 ms
[04:40:02] Starting 'x_target'...
[04:40:02] Finished 'x_target' after 3.59 ms
[04:40:02] Starting 'x_open_server_bundle'...
[04:40:02] Finished 'x_open_server_bundle' after 61 ms
FINISHED SUCCESSFULLY
[04:40:02] Finished 'production' after 24 s
C:\Users\Admin\.angular2\front\node_modules\rx\dist\rx.all.js:9772
      throw new Error('Invalid arguments');
      ^
      ^

Error: Invalid arguments
    at Subject.observableProto.delay (C:\Users\Admin\.angular2\front\node_modules\rx\dist\rx.all.js:9772:13)
    at C:\Users\Admin\.angular2\front\node_modules\browser-sync\lib\file-watcher.js:128:41
    at Array.reduce (native)
    at getObservable (C:\Users\Admin\.angular2\front\node_modules\browser-sync\lib\file-watcher.js:125:24)
    at module.exports.plugin (C:\Users\Admin\.angular2\front\node_modules\browser-sync\lib\file-watcher.js:16:19)
    at Object.module.exports.setFileWatchers [as fn] (C:\Users\Admin\.angular2\front\node_modules\browser-sync\lib\async.js:170:63)
    at C:\Users\Admin\.angular2\front\node_modules\browser-sync\lib\browser-sync.js:149:14
    at iterate (C:\Users\Admin\.angular2\front\node_modules\browser-sync\lib\utils.js:268:13)
    at C:\Users\Admin\.angular2\front\node_modules\browser-sync\lib\utils.js:277:25
    at executeTask (C:\Users\Admin\.angular2\front\node_modules\browser-sync\lib\browser-sync.js:170:13)

Is there a good workaround to get out a production build.
Thanks,

Jan

Duplicate modules in node_modules and jspm_modules

After doing npm install and gulp development I get some missing libraries so I npm i again, that's when jspm kicks in and downloads the entire web to my disk. Is it meant to do that?

Being new to jspm I hoped that it wouldn't replicate the modules that are already in node_modules what is going on? Am I missing something?

Quick question

Hello,

Sorry to use github issues for my personal questions about angular 2, but this line confuses me:
https://github.com/born2net/ng2Boilerplate/blob/master/src/pipes/CharCount.ts#L5

Why would you want to re-run this everytime any field updates instead of only the relevant input?

Error running npm install

Seems to be a problem with reflect-metadata. Any ideas?

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'install' ]
2 info using [email protected]
3 info using [email protected]
4 verbose readDependencies loading dependencies from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\package.json
5 verbose install where, deps [ 'C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master',
5 verbose install [ 'angular2',
5 verbose install 'bootstrap',
5 verbose install 'es6-module-loader',
5 verbose install 'es6-shim',
5 verbose install 'reflect-metadata',
5 verbose install 'rxjs',
5 verbose install 'systemjs',
5 verbose install 'zone.js',
5 verbose install 'browser-sync',
5 verbose install 'chalk',
5 verbose install 'crypto',
5 verbose install 'express',
5 verbose install 'gulp',
5 verbose install 'gulp-git',
5 verbose install 'gulp-inject',
5 verbose install 'gulp-typedoc',
5 verbose install 'gulp-typescript',
5 verbose install 'gulp-uglify',
5 verbose install 'gulp-util',
5 verbose install 'gulp-watch',
5 verbose install 'lodash',
5 verbose install 'ng2-file-upload',
5 verbose install 'rsync',
5 verbose install 'run-sequence',
5 verbose install 'tsd',
5 verbose install 'tslint',
5 verbose install 'typedoc',
5 verbose install 'typescript' ] ]
6 verbose install where, peers [ 'C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master',
6 verbose install [] ]
7 verbose installManyTop reading for lifecycle C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\package.json
8 info preinstall [email protected]
9 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\angular2\package.json
10 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\bootstrap\package.json
11 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\browser-sync\package.json
12 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\chalk\package.json
13 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\crypto\package.json
14 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\es6-module-loader\package.json
15 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\es6-promise\package.json
16 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\es6-shim\package.json
17 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\express\package.json
18 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp\package.json
19 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp-git\package.json
20 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp-inject\package.json
21 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp-typedoc\package.json
22 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp-typescript\package.json
23 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp-uglify\package.json
24 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp-util\package.json
25 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp-watch\package.json
26 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\lodash\package.json
27 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\ng2-file-upload\package.json
28 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\reflect-metadata\package.json
29 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\rsync\package.json
30 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\run-sequence\package.json
31 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\rxjs\package.json
32 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\systemjs\package.json
33 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\tsd\package.json
34 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\tslint\package.json
35 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\typedoc\package.json
36 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\typescript\package.json
37 verbose installManyTop reading scoped package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\zone.js\package.json
38 info package.json [email protected] No license field.
39 info package.json [email protected] crypto is also the name of a node core module.
40 info package.json [email protected] No license field.
41 info package.json [email protected] No license field.
42 info package.json [email protected] No license field.
43 info package.json [email protected] license should be a valid SPDX license expression
44 verbose readDependencies loading dependencies from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\package.json
45 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\angular2\package.json
46 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\bootstrap\package.json
47 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\browser-sync\package.json
48 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\chalk\package.json
49 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\crypto\package.json
50 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\es6-module-loader\package.json
51 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\es6-promise\package.json
52 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\es6-shim\package.json
53 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\express\package.json
54 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp\package.json
55 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp-git\package.json
56 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp-inject\package.json
57 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp-typedoc\package.json
58 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp-typescript\package.json
59 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp-uglify\package.json
60 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp-util\package.json
61 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\gulp-watch\package.json
62 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\lodash\package.json
63 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\ng2-file-upload\package.json
64 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\reflect-metadata\package.json
65 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\rsync\package.json
66 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\run-sequence\package.json
67 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\rxjs\package.json
68 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\systemjs\package.json
69 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\tsd\package.json
70 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\tslint\package.json
71 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\typedoc\package.json
72 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\typescript\package.json
73 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\zone.js\package.json
74 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules.bin\browser-sync\package.json
75 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules.bin\browser-sync.cmd\package.json
76 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules.bin\tsc\package.json
77 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules.bin\tsc.cmd\package.json
78 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules.bin\tsd\package.json
79 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules.bin\tsd.cmd\package.json
80 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules.bin\tslint\package.json
81 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules.bin\tslint.cmd\package.json
82 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules.bin\tsserver\package.json
83 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules.bin\tsserver.cmd\package.json
84 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules.bin\typedoc\package.json
85 verbose targetResolver reading package data from C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules.bin\typedoc.cmd\package.json
86 verbose already installed skipping [email protected] C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
87 verbose already installed skipping systemjs@^0.19.4 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
88 verbose already installed skipping [email protected] C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
89 verbose already installed skipping browser-sync@~2.10.1 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
90 verbose already installed skipping chalk@^1.1.1 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
91 verbose already installed skipping [email protected] C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
92 verbose already installed skipping express@~4.13.1 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
93 verbose already installed skipping gulp@^3.9.0 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
94 verbose already installed skipping gulp-git@^1.6.0 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
95 verbose already installed skipping gulp-inject@^1.3.1 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
96 verbose already installed skipping gulp-typedoc@^1.2.1 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
97 verbose already installed skipping gulp-typescript@~2.8.2 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
98 verbose already installed skipping gulp-uglify@^1.2.0 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
99 verbose already installed skipping gulp-util@^3.0.7 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
100 verbose already installed skipping gulp-watch@^4.2.4 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
101 verbose already installed skipping lodash@^3.10.1 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
102 verbose already installed skipping ng2-file-upload@^0.46.0 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
103 verbose already installed skipping rsync@^0.4.0 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
104 verbose already installed skipping run-sequence@^1.1.5 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
105 verbose already installed skipping tsd@^0.6.5 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
106 verbose already installed skipping tslint@^3.2.1 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
107 verbose already installed skipping typedoc@^0.3.12 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
108 verbose already installed skipping typescript@~1.7.3 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
109 verbose already installed skipping [email protected] C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
110 verbose already installed skipping bootstrap@^3.3.5 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
111 verbose already installed skipping es6-module-loader@^0.17.8 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
112 verbose already installed skipping es6-shim@^0.33.6 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
113 verbose already installed skipping reflect-metadata@^0.1.2 C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
114 silly install resolved []
115 info build C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
116 info linkStuff [email protected]
117 silly linkStuff [email protected] has C:\Users\will.hartman\Downloads\ng2Boilerplate-master as its parent node_modules
118 verbose linkBins [email protected]
119 verbose linkMans [email protected]
120 verbose rebuildBundles [email protected]
121 verbose rebuildBundles [ '.bin',
121 verbose rebuildBundles 'angular2',
121 verbose rebuildBundles 'bootstrap',
121 verbose rebuildBundles 'browser-sync',
121 verbose rebuildBundles 'chalk',
121 verbose rebuildBundles 'crypto',
121 verbose rebuildBundles 'es6-module-loader',
121 verbose rebuildBundles 'es6-promise',
121 verbose rebuildBundles 'es6-shim',
121 verbose rebuildBundles 'express',
121 verbose rebuildBundles 'gulp',
121 verbose rebuildBundles 'gulp-git',
121 verbose rebuildBundles 'gulp-inject',
121 verbose rebuildBundles 'gulp-typedoc',
121 verbose rebuildBundles 'gulp-typescript',
121 verbose rebuildBundles 'gulp-uglify',
121 verbose rebuildBundles 'gulp-util',
121 verbose rebuildBundles 'gulp-watch',
121 verbose rebuildBundles 'lodash',
121 verbose rebuildBundles 'ng2-file-upload',
121 verbose rebuildBundles 'reflect-metadata',
121 verbose rebuildBundles 'rsync',
121 verbose rebuildBundles 'run-sequence',
121 verbose rebuildBundles 'rxjs',
121 verbose rebuildBundles 'systemjs',
121 verbose rebuildBundles 'tsd',
121 verbose rebuildBundles 'tslint',
121 verbose rebuildBundles 'typedoc',
121 verbose rebuildBundles 'typescript',
121 verbose rebuildBundles 'zone.js' ]
122 verbose rebuild bundle C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\es6-promise
123 info build C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules\es6-promise
124 info preinstall [email protected]
125 info linkStuff [email protected]
126 silly linkStuff [email protected] has C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\node_modules as its parent node_modules
127 verbose linkBins [email protected]
128 verbose linkMans [email protected]
129 verbose rebuildBundles [email protected]
130 info install [email protected]
131 info postinstall [email protected]
132 info install [email protected]
133 info postinstall [email protected]
134 info prepublish [email protected]
135 verbose validateInstall loading C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master\package.json for validation
136 verbose stack Error: The package [email protected] does not satisfy its siblings' peerDependencies requirements!
136 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\install.js:125:32
136 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\install.js:268:7
136 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-installed\read-installed.js:142:5
136 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-installed\read-installed.js:263:14
136 verbose stack at cb (C:\Program Files\nodejs\node_modules\npm\node_modules\slide\lib\async-map.js:47:24)
136 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-installed\read-installed.js:263:14
136 verbose stack at cb (C:\Program Files\nodejs\node_modules\npm\node_modules\slide\lib\async-map.js:47:24)
136 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-installed\read-installed.js:263:14
136 verbose stack at cb (C:\Program Files\nodejs\node_modules\npm\node_modules\slide\lib\async-map.js:47:24)
136 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-installed\read-installed.js:263:14
137 verbose cwd C:\Users\will.hartman\Downloads\ng2Boilerplate-master\ng2Boilerplate-master
138 error Windows_NT 6.3.9600
139 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install"
140 error node v4.2.4
141 error npm v2.14.12
142 error code EPEERINVALID
143 error peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
143 error peerinvalid Peer [email protected] wants [email protected]
144 verbose exit [ 1, true ]

angular 2 loading

After npm install it starts with Angular 2 loading

SVG's SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
http://localhost:8080/jspm_packages/github/twbs/[email protected] Failed to load resource: the server responded with a status of 404 (Not Found)
index.html:50 Error: Error: XHR error (404 Not Found) loading http://localhost:8080/jspm_packages/github/twbs/[email protected](…) "error system.js Error: Error: XHR error (404 Not Found) loading http://localhost:8080/jspm_packages/github/twbs/[email protected]
Error loading http://localhost:8080/jspm_packages/github/twbs/[email protected]
Error loading http://localhost:8080/src/App.ts"

How to use credit service with an input?

Is there an example on how to attach the service to an input? Been trying to call the service through (input) / (keydown) etc inside a custom directive but not having much luck and can't find anything in the repo which shows how it works.

(https://github.com/born2net/Angular-kitchen-sink/blob/master/src/services/CreditService.ts)

Sorry if this is inappropriate - thanks!

Installation broken: Cannot find module 'gulp-tslint-stylish'

npm i
...

ok   Loader files downloaded successfully

ok   Install complete.
module.js:339
    throw err;
    ^

Error: Cannot find module 'gulp-tslint-stylish'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/Users/ihorskyi/dev/playground/ng2Boilerplate/gulpfile.js:20:21)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)

Minitabs.ts is missing

The commit to include minitabs is missing Minitabs.ts. Can you check it in, please?

Embed hot-reload for css file

Hi,

if this is possible, it would be a nice feature. I saw it on a other seed.

Thanks,

Jan

ERROR Cannot find module 'Immutable'

I'm having a problem to run this app. I cloned it, ran npm install and tried to run it with npm 5.3.0

 Angular-kitchen-sink git:(master) ✗ npm run dev

> [email protected] dev /home/filipe/Workspace/ng2-demo/Angular-kitchen-sink
> ng serve --port 4201 --aot false

** NG Live Development Server is listening on localhost:4201, open your browser on http://localhost:4201 **
Hash: 75a2042ea37140c8a900                                                                
Time: 38393ms
chunk    {0} 0.chunk.js, 0.chunk.js.map 12.8 kB {1} [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 548 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 190 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 6.12 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in /home/filipe/Workspace/ng2-demo/Angular-kitchen-sink/src/comps/app1/todos/Todolist.ts (10,20): Cannot find module 'Immutable'.

ERROR in /home/filipe/Workspace/ng2-demo/Angular-kitchen-sink/src/pipes/SortBy.ts (2,20): Cannot find module 'Immutable'.
webpack: Failed to compile.

 Angular-kitchen-sink git:(master) ✗ ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.2.6
node: 6.11.1
os: linux x64
@angular/animations: 4.3.2
@angular/common: 4.3.2
@angular/compiler: 4.3.2
@angular/core: 4.3.2
@angular/forms: 4.3.2
@angular/http: 4.3.2
@angular/platform-browser: 4.3.2
@angular/platform-browser-dynamic: 4.3.2
@angular/router: 4.0.2
@angular/cli: 1.2.6
@angular/compiler-cli: 4.3.2
@angular/language-service: 4.3.2

Angular-kitchen-sink git:(master) ✗ npm ls --depth=0
[email protected] /home/filipe/Workspace/ng2-demo/Angular-kitchen-sink
├── @angular/[email protected]
├── @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── @angular/[email protected]
├── @angularclass/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] extraneous
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── UNMET PEER DEPENDENCY [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

npm ERR! peer dep missing: @angular/[email protected], required by @angular/[email protected]
npm ERR! peer dep missing: @angular/common@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/common@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/compiler@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/[email protected], required by @angular/[email protected]
npm ERR! peer dep missing: @angular/core@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/core@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/core@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/[email protected], required by @angular/[email protected]
npm ERR! peer dep missing: @angular/platform-browser@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/platform-browser-dynamic@^2.0.0, required by [email protected]
npm ERR! peer dep missing: tslint@^5.0.0, required by [email protected]
npm ERR! extraneous: [email protected] /home/filipe/Workspace/ng2-demo/Angular-kitchen-sink/node_modules/handlebars
npm ERR! error in /home/filipe/Workspace/ng2-demo/Angular-kitchen-sink/node_modules/svgo/node_modules/js-yaml: ENOENT: no such file or directory, open '/home/filipe/Workspace/ng2-demo/Angular-kitchen-sink/node_modules/svgo/node_modules/js-yaml/package.json'
npm ERR! invalid: js-yaml /home/filipe/Workspace/ng2-demo/Angular-kitchen-sink/node_modules/svgo/node_modules/js-yaml
npm ERR! error in /home/filipe/Workspace/ng2-demo/Angular-kitchen-sink/node_modules/directory-encoder/node_modules/handlebars: ENOENT: no such file or directory, open '/home/filipe/Workspace/ng2-demo/Angular-kitchen-sink/node_modules/directory-encoder/node_modules/handlebars/package.json'
npm ERR! invalid: handlebars /home/filipe/Workspace/ng2-demo/Angular-kitchen-sink/node_modules/directory-encoder/node_modules/handlebars

Update the readme of ng2Boilerplate... recommend you checkout...

lots of good pointers on dev (especially in Windows env) + more
checkout the read me
enjoy!

Comparison to other projects

This is a great project. I entered selling points of this project and I made the following comparison of a few projects to show how they differ. If you have any corrections to make you can do so by commenting in the spreadsheet from which this is generated. If you are wondering whey I went to such lengths it's not to promote a particular project. It's because I want people to stop competing and start working together. It is overwhelming to learners who have to pick a starting point and causes unnecessary duplication of work by the disagreeing project owners.

Benefits	Angular-kitchen-sink	great big angular2 example	ngrx example app	angular2-redux-starter	angular-seed-advanced
Angular/redux project	ng2-redux	ngrx	ngrx	ng2-redux	ngrx
Account Management, Forgotten Password with Resetting	Y
Account Management, login/logout	Y	Y		Y
Analytics	Y	Y			Y
Asynchronously loaded data example	Y	Y	Y		Y
Authentication	Y	Y		Y
Authentication, with two-factor authentication	Y
Breadcrumbs	Y
Buttons	Y
Charts	Y
Client-side unit tests	Y			Y	Y
Code coverage reporting	Y	Y		Y
Command line interface (CLI)	Y	Y		Y
Components communicate with events	Y	Y	Y
Core Module		Y
CSS style checking		Y
Date picker	Y
Deployment automation, to a native executable					Y
Deployment automation, using Docker				Y	Y
Deployment automation, using Github Pages	Y	Y
Derived, computed properties	Y	Y
Dropdowns	Y
Dynamic component creation	Y
End-to-end tests	Y			Y	Y
External, 3rd party, API interaction	Y	Y	Y
Footer	Y
Full-stack CRUD	Y	Y
Full-stack CRUD, with Create, Update and Delete	Y	Y
Full-stack CRUD, with Create, Update and Delete, individual records	Y	Y
Full-stack CRUD, with Create, Update and Delete, whole data structures		Y
Full-stack CRUD, with Read	Y	Y
Grid, Editable		Y
i18n, localization					Y
Images, Carousel	Y
In-memory server-side database	Y	Y		Y	Y
Local storage	Y	Y	Y	Y
Many-to-many data		Y
Modals (popups, dialogs)	Y
Mouse wheel	Y
Navigation bar	Y	Y	Y
Panels, collapsible (accordian)	Y
Panels, draggable	Y	Y
Persistent data storage		Y		Y	Y
Popover	Y
Production build, generate docs	Y
Progress bars	Y
Rating, scale	Y
Responsive styles	Y	Y		Y
Search, actually works with backend API		Y	Y
Separation of smart containers and dumb components		Y	Y
Server-side integration & unit tests	Y	Y
Shared Module	Y	Y
Slider	Y
Style guide for code		Y
Tabs	Y
There is a book about it				Y
Timepicker	Y
Tooltips	Y
Typeahead (autocomplete) fields	Y
Update generated code in an existing app	Y	Y

Error load crypto.js

Error: Error: XHR error (404 Not Found) loading http://localhost:8080/crypto.js(…) "error system.js Error: Error: XHR error (404 Not Found) loading http://localhost:8080/crypto.js
Error loading http://localhost:8080/crypto.js as "crypto" from http://localhost:8080/jspm_packages/npm/[email protected]/Reflect.js"

Question?

Why use Redux and not ngrx/store?