pkozlowski-opensource / ng2-play Goto Github PK
View Code? Open in Web Editor NEWA minimal Angular2 playground using TypeScript and SystemJS loader
A minimal Angular2 playground using TypeScript and SystemJS loader
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
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 ]
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
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
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.
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?
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!
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!!
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
No command 'gulp' found, did you mean:
Command 'gslp' from package 'ghostscript' (main)
gulp: command not found
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
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?
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.
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
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
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>
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
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.
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.
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...
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)
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 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]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.