I know the idea here is to keep this minimal, but I think the lack of CSS/Webcomponents in Angular 2 examples is conspicuous. Styles are such a critical part of any app that it seems like we should have at least a minimal example it here. Would you consider adding a styling example into this app? I've see a lot of people just putting <style> tags in their view html file. Perhaps it is that simple, but I still think it would be helpful.

Hi , when i execute gulp play i have my ie browser is launched automatically and my page browser show only Loading...., and when i check a console i have an error on
Fichier : localhost:9000, ligne : 19, colonne : 5 and it says in french
System.config({defaultJSExtensions: true});
L’objet ne gère pas la propriété ou la méthode « config »
But the strange is it works on chrome
im working under windows 7
node v4.1.0
npm v3.3.3
gulp cli v3.9.0

I just changed

        Say hello to: <input [value]="name" (input)="name = $event.target.value">

to

        Say hello to: <input [(ngModel)]="name">

and I am getting this error. Don't understand why

EXCEPTION: No value accessor for '' in [name in HelloApp@2:29]
angular2.min.js:17 EXCEPTION: No value accessor for '' in [name in HelloApp@2:29]t.logError @ angular2.min.js:17
angular2.min.js:17 ORIGINAL EXCEPTION: No value accessor for ''t.logError @ angular2.min.js:17
angular2.min.js:17 ORIGINAL STACKTRACE:t.logError @ angular2.min.js:17
angular2.min.js:17 Error: No value accessor for ''
    at new t (angular2.min.js:5)
    at a (angular2.min.js:15)
    at Object.i [as setUpControl] (angular2.min.js:15)
    at t.ngOnChanges (angular2.min.js:12)
    at e.ChangeDetector_HelloApp_0.detectChangesInRecordsInternal (viewFactory_HelloApp:92)
    at e.detectChangesInRecords (angular2.min.js:7)
    at e.runDetectChanges (angular2.min.js:7)
    at e._detectChangesInViewChildren (angular2.min.js:7)
    at e.runDetectChanges (angular2.min.js:7)
    at e.detectChanges (angular2.min.js:7)

While changing the value in the input field

Uncaught EXCEPTION: Error during evaluation of "input"
ORIGINAL EXCEPTION: TypeError: this.directive_0_1.onChange is not a function
ORIGINAL STACKTRACE:
TypeError: this.directive_0_1.onChange is not a function
    at e.ChangeDetector_HelloApp_0.handleEventInternal (viewFactory_HelloApp:261:36)
    at e.handleEvent (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:7:13698)
    at e.triggerEventHandlers (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:8:6038)
    at eval (viewFactory_HelloApp:330:102)
    at http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:10:20264
    at http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:10:11943
    at ZoneDelegate.invoke (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:332:29)
    at Object.inner.inner.fork.onInvoke (http://localhost:9000/node_modules/angular2/bundles/angular2.min.js:2:6295)
    at ZoneDelegate.invoke (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:331:35)
    at Zone.runGuarded (http://localhost:9000/node_modules/angular2/bundles/angular2-polyfills.js:241:48)
ERROR CONTEXT:
[object Object]

This was reported before but appears to still occur when running gulp play

Vincents-MacBook-Pro-2:ng2-play vincentgabriel$ gulp play
[11:02:57] Using gulpfile ~/Sites/ng2-play/gulpfile.js
[11:02:57] Starting 'ts2js'...
[11:02:59] Finished 'ts2js' after 2.04 s
[11:02:59] Starting 'play'...
[11:02:59] Finished 'play' after 63 ms
events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::9000
    at Object.exports._errnoException (util.js:870:11)
    at exports._exceptionWithHostPort (util.js:893:20)
    at Server._listen2 (net.js:1238:14)
    at listen (net.js:1274:10)
    at Server.listen (net.js:1370:5)
    at Gulp.<anonymous> (/Users/vincentgabriel/Sites/ng2-play/gulpfile.js:34:28)
    at module.exports (/Users/vincentgabriel/Sites/ng2-play/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/vincentgabriel/Sites/ng2-play/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Users/vincentgabriel/Sites/ng2-play/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at /Users/vincentgabriel/Sites/ng2-play/node_modules/gulp/node_modules/orchestrator/index.js:279:18

npm install
npm ERR! Darwin 15.2.0
npm ERR! argv "/usr/local/Cellar/node/5.3.0/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v5.3.0
npm ERR! npm v3.3.12
npm ERR! shasum check failed for /var/folders/kc/k_tvbzbd7js1svtf5rz7gdfh0000gn/T/npm-4336-2004d989/registry.npmjs.org/angular2/-/angular2-2.0.0-beta.3.tgz
npm ERR! Expected: 30b791052b092af48b2508b4f409701a8c47fd72
npm ERR! Actual: 1ab98b09b272aaead71d9efc2c637c5f529a4e91
npm ERR! From: https://registry.npmjs.org/angular2/-/angular2-2.0.0-beta.3.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

Last working commit for me (on fresh installs) is b7b0937.
I'm getting:

GET http://localhost:9000/angular2/angular2.js [HTTP/1.1 404 Not Found 2ms]
Error: Unable to load script http://localhost:9000/angular2/angular2.js
    Error loading http://localhost:9000/angular2/angular2.js from http://localhost:9000/hello.js
    Error loading http://localhost:9000/angular2/angular2.js
Stack trace:
error@http://localhost:9000/lib/system-csp-production.src.js:1296:18
run@http://localhost:9000/lib/zone.js:110:14
zoneBoundFn@http://localhost:9000/lib/zone.js:83:14
 zone.js:110:13

Is this repository supposed to stay a minimal working example, or is it your intention to make it a skeleton for angular 2 apps ?

I ask because I'm wondering if I should make my own repo with all my tools (browser sync, ...) and a minimal working app, or if I should PR this repo.

For the moment you're using a demo component but it's more like a directive, not like a real application with multiple components & services.

I opened an issue in the angular repo angular/angular#2031 but maybe that's something more suited to ng2-play: would it be possible to have a sample of unit testing?

I would gladly contribute a PR if I add some guidance, but I'm a little bit in the dark on the good way to do this... I tried myself but it seems some things are lacking, like the test typings for TS, so I'm not even sure that's possible at the moment...

Hey Pawel,

thanks for setting this up. This made me finally put my hand on Angular2 code because it's so easy to dive into 👍

One thing that's still unclear to me though: How should I best debug my app with this setup? I know I can set breakpoints in the transpiled code and it kinda works. But I'd rather have proper source maps. I went on and added gulp-sourcemaps to the gulpfile and while I see the ES6 source appearing in the developer tools, breakpoints are not being hit there.

Any hint how to handle this with this setup?

Cheers,

Christoph

Hey @pkozlowski-opensource

it's actually not the first time I ran into this with this setup. Whenever I use @Query traceur throws.

Here's a snippet of my code:

@Component({ ... })
@View({ ... })
class InnerWidget { }

@Component({ ... })
@View({ ... })
class Widget {
  constructor(@Query(InnerWidget) query:QueryList<InnerWidget>) {

  }
}

@Component({...}}
@View({
  template: `
    <widget>
      <inner-widget><inner-widget>
    </widget>
  `,
  directives: [Widget, InnerWidget]
})
class App {

}

Here's the (not so helpful error):

EXCEPTION: TypeError: Cannot read property '__$511015796$4$__' of undefined
angular2.js:18939 STACKTRACE:
angular2.js:18939 TypeError: Cannot read property '__$511015796$4$__' of undefined
    at Object.getOwnHashObject (traceur-runtime.js:185)
    at Object.genericType (traceur-runtime.js:1414)
    at Function.execute.Object.defineProperty.get (hello.js:36)
    at ReflectionCapabilities.execute.ReflectionCapabilities.parameters (angular2.js:5329)
    at Reflector.execute.Reflector.parameters (angular2.js:5138)
    at _dependenciesFor (angular2.js:23474)
    at execute.Binding.resolve (angular2.js:23614)
    at Function.execute.DirectiveBinding.createFromBinding (angular2.js:26005)
    at Function.execute.DirectiveBinding.createFromType (angular2.js:26039)
    at execute.Compiler._bindDirective (angular2.js:27837)
localhost/:1 Uncaught (in promise) TypeError: Cannot read property '__$511015796$4$__' of undefined
    at Object.getOwnHashObject (http://localhost:9000/lib/traceur-runtime.js:185:30)
    at Object.genericType (http://localhost:9000/lib/traceur-runtime.js:1414:31)
    at Function.execute.Object.defineProperty.get (http://localhost:9000/hello.js:36:36)
    at ReflectionCapabilities.execute.ReflectionCapabilities.parameters (http://localhost:9000/lib/angular2.js:5329:37)
    at Reflector.execute.Reflector.parameters (http://localhost:9000/lib/angular2.js:5138:50)
    at _dependenciesFor (http://localhost:9000/lib/angular2.js:23474:28)
    at execute.Binding.resolve (http://localhost:9000/lib/angular2.js:23614:28)
    at Function.execute.DirectiveBinding.createFromBinding (http://localhost:9000/lib/angular2.js:26005:30)
    at Function.execute.DirectiveBinding.createFromType (http://localhost:9000/lib/angular2.js:26039:37)
    at execute.Compiler._bindDirective (http://localhost:9000/lib/angular2.js:27837:37)getOwnHashObject @ traceur-runtime.js:185genericType @ traceur-runtime.js:1414execute.Object.defineProperty.get @ hello.js:36execute.ReflectionCapabilities.parameters @ angular2.js:5329execute.Reflector.parameters @ angular2.js:5138_dependenciesFor @ angular2.js:23474execute.Binding.resolve @ angular2.js:23614execute.DirectiveBinding.createFromBinding @ angular2.js:26005execute.DirectiveBinding.createFromType @ angular2.js:26039execute.Compiler._bindDirective @ angular2.js:27837(anonymous function) @ angular2.js:27884execute.ListWrapper.map @ angular2.js:4907execute.Compiler._compile @ angular2.js:27883(anonymous function) @ angular2.js:27928(anonymous function) @ angular2.js:27913execute.Compiler._compileNestedProtoViews @ angular2.js:27912(anonymous function) @ angular2.js:27854run @ zone.js:113execute.NgZone._createInnerZone.zone.fork.fork.$run @ angular2.js:12928zoneBoundFn @ zone.js:86
angular2.js:28169 Uncaught (in promise) TypeError: Cannot read property '__$511015796$4$__' of undefined
    at Object.getOwnHashObject (http://localhost:9000/lib/traceur-runtime.js:185:30)
    at Object.genericType (http://localhost:9000/lib/traceur-runtime.js:1414:31)
    at Function.execute.Object.defineProperty.get (http://localhost:9000/hello.js:36:36)
    at ReflectionCapabilities.execute.ReflectionCapabilities.parameters (http://localhost:9000/lib/angular2.js:5329:37)
    at Reflector.execute.Reflector.parameters (http://localhost:9000/lib/angular2.js:5138:50)
    at _dependenciesFor (http://localhost:9000/lib/angular2.js:23474:28)
    at execute.Binding.resolve (http://localhost:9000/lib/angular2.js:23614:28)
    at Function.execute.DirectiveBinding.createFromBinding (http://localhost:9000/lib/angular2.js:26005:30)
    at Function.execute.DirectiveBinding.createFromType (http://localhost:9000/lib/angular2.js:26039:37)
    at execute.Compiler._bindDirective (http://localhost:9000/lib/angular2.js:27837:37)

No command 'gulp' found, did you mean:
Command 'gslp' from package 'ghostscript' (main)
gulp: command not found

On index.html - calling System.import('hello.js') triggers an XHR request to load the hello module, is there a way to pre-load this module?

BTW @pkozlowski-opensource thank you for this project!

Apparently it's impossible to load components such as router without getting this error. Any suggestion on how to fix it?

The import which brokes my code is:

import { Router, RouterOutlet } from 'angular2/router';

I tried to do this

in gulpfile:
js: 'src/js//*.js',
html: 'src/html//*.html'

and:
.pipe(gulp.dest('dist/js'));

in index.html:
System.import('js/app').catch(console.log.bind(console));

and renamed hello.js to app.js

js file available, but infinite "loading"

screenshot:
http://take.ms/WMoBP

This is probably my bad rather than the project, but I can't think of a better place to post.

I get this error when I follow the installation instructions. The screen just stays on "Loading..."

Error: bootstrap is not a function
Error loading http://localhost:9000/hello.js
Stack trace:
.execute@http://localhost:9000/hello.js:34:7
ensureEvaluated@http://localhost:9000/lib/system-csp-production.src.js:1785:5
bootstrap/</</</</</<.execute@http://localhost:9000/lib/system-csp-production.src.js:1915:13
doDynamicExecute@http://localhost:9000/lib/system-csp-production.src.js:688:20
link@http://localhost:9000/lib/system-csp-production.src.js:883:20
doLink@http://localhost:9000/lib/system-csp-production.src.js:555:7
updateLinkSetOnLoad@http://localhost:9000/lib/system-csp-production.src.js:603:18
proceedToTranslate/</<@http://localhost:9000/lib/system-csp-production.src.js:424:11
run@http://localhost:9000/lib/zone.js:113:14
zoneBoundFn@http://localhost:9000/lib/zone.js:86:14

I also get this warning in firefox:

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

How do you point to angular2/ folder since you are serving ~/ as static (that's where __dir points to, right?) and angular is inside node_modules? I was using mongoose for running a simple dev static server but when angular files require other angular files they look for in root and they aren't there

Just wondering if we would be interested to make this repo code be closer to what angular.io and the main angular 2 repo describe.

• use .ts files like angular.io 5-min tutorial
• use tsc (with gulp-typescript?) like the main angular 2 repo and angular.io

I'm not criticizing traceur and I'm not aware of its benefits. Also I would be interested to draft a PR even for a parallel separate branch.

Ran npm i
Have gulp installed globally.

When run gulp play, I get this.

[13:33:49] Using gulpfile ~/Documents/Dev/Git/ng2-play/gulpfile.js
[13:33:49] Starting 'js'...
[13:33:49] Starting 'html'...
[13:33:49] Starting 'angular2'...
[13:33:49] Finished 'html' after 102 ms
[13:33:49] Finished 'js' after 117 ms

events.js:72
throw er; // Unhandled 'error' event
^
Error: angular2/src/directives/foreach:9:5: super call is only allowed in derived constructor

I know that you should put the script tags from the head INTO the body for non blocking stuff etc. So we put the scripts before the . Now I see your index.html and all script tags afre BEHIND . Is there a reason why?

Hi there & thanks for this useful repo.

I couldn't get this to work right away though. When i would try to load the app, i would get this error:

Error: Array.from is not a function Error loading http://localhost:8000/dist/hello.js

I added this to the index.html file and it started working:

<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>

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 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info prestart [email protected]
6 info start [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec start script
9 verbose stack Error: [email protected] start: gulp play
9 verbose stack Exit status 1
9 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:213:16)
9 verbose stack at EventEmitter.emit (events.js:110:17)
9 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack at ChildProcess.emit (events.js:110:17)
9 verbose stack at maybeClose (child_process.js:1015:16)
9 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
10 verbose pkgid [email protected]
11 verbose cwd Z:\coding\ng2-play-master
12 error Windows_NT 6.1.7601
13 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
14 error node v0.12.7
15 error npm v2.11.3
16 error code ELIFECYCLE
17 error [email protected] start: gulp play
17 error Exit status 1
18 error Failed at the [email protected] start script 'gulp play'.
18 error This is most likely a problem with the ng2-play package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error gulp play
18 error You can get their info via:
18 error npm owner ls ng2-play
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

I am very new to Angular and Gulp. Can anyone tell me how to add angular2/router in gulpfile.js or anywhere else? Thank you in advance!!

This code:

Promise.all([System.import('angular2/core'), System.import('hello')]).then(function (modules) {
        modules[0].bootstrap(modules[1].Hello);
    }, console.log.bind(console));

looks like black undocumented magic.
I understand each byte of this code, but.. Is it only way? Why so complicated?