This is test!

Hello !

I attended one of the sessions in Google NYC . I'd like to use the workshop as the starting point for Angular.js hands-on meetups we have scheduled during the next few months. Nonetheless I'll need the contents translated into Spanish . Look forward to be granted with access to the translations panel . Thanks in advance .

p.s. Happy new year !

This is actually a pretty cool feature, which sounds more complex that it is (in theory at least)

Problem:
Students try using for loop to iterate, get into an infinite loop when the app tries to run the code in the middle of them typing.
for(let i=0;i<10;i|)

The task is to use typescript compiler API to loop through the abstract syntax tree (that's just a huge JS object with the code structure.) of every file

1. find a loop insert
2. Create a variable before the loop.
3. Increment the value every cycle
4. if the value hits some large number (let's say 1000) break out of the loop.

This should take a few hours if you haven't done anything similar before.

If you feel adventurous, I encourage you to try this one :)

Heya, we chatted at ngconf and I just wanted to leave here to leave here some instructions on how you can do it. It should work for JSON well.

• https://webpack.js.org/guides/code-splitting-import/
• https://github.com/angular/angular-cli/blob/master/tests/e2e/tests/misc/lazy-module.ts#L33

Potential options:

1. Simplify and document well existing format - this might work, but it would still require some skill and ramp-up time.
2. Find an existing format which is used somewhere else - would be great, but I'm not sure where to even find it
3. Build a UI tool for creating exercises - this would probable be the best experience, but this also requires a lot of work.

Example of how it works now:
To show hello between milestone 2 and 3 and to trim the whitespace, it should look like this
/*d:milestone-1:milestone-2/trimBoth*/ hello /*/d*/

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
/*d:thumbsComponentUse/trimLeading*/
import {ThumbsComponent} from './thumbs/thumbs.component';
/*/d*//*d:togglePanelComponentUse/trimLeading*/
import {TogglePanelComponent} from './toggle-panel/toggle-panel.component';
/*/d*//*d:diInjectService/trimLeading*/
import {VideoService} from './video/video.service';
/*/d*//*d:videoComponentUse/trimLeading*/
import {VideoComponent} from './video/video.component';
/*/d*//*d:contextComponentUse/trimLeading*/
import {ContextComponent} from './context/context.component';
/*/d*//*d:fuzzyPipeUse/trimLeading*/
import {FuzzyPipe} from './fuzzy-pipe/fuzzy.pipe';
/*/d*//*d:createModuleSolved/trimTrailing*/
@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent
    /*/d*//*d:videoComponentUseSolved/trimBoth*/, VideoComponent
    /*/d*//*d:thumbsComponentUseSolved/trimBoth*/, ThumbsComponent
    /*/d*//*d:togglePanelComponentUseSolved/trimBoth*/, TogglePanelComponent
    /*/d*//*d:contextComponentUse/trimBoth*/, ContextComponent
    /*/d*//*d:fuzzyPipeUseSolved/trimBoth*/, FuzzyPipe
    /*/d*//*d:createModuleSolved/trimBoth*/
  ],
  bootstrap: [AppComponent]/*/d*//*d:diInjectServiceSolved/trimTrailing*/,
  providers: [VideoService]
  /*/d*//*d:createModuleSolved/trimTrailing*/
})
export class AppModule {
  /*/d*//*d:createModuleSolved*/
}/*/d*/

npm -v
3.10.10

node -v
v6.10.0

Steps to reproduce:

• checkout master
• npm i
• npm start

Error:

$ npm start

> [email protected] start /Users/pvanloon/workspace/ng2-codelab
> ng serve

The "@angular/compiler-cli" package was not properly installed.
Error: The "@angular/compiler-cli" package was not properly installed.
    at Object.<anonymous> (/Users/pvanloon/workspace/ng2-codelab/node_modules/@ngtools/webpack/src/index.js:14:11)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/pvanloon/workspace/ng2-codelab/node_modules/@angular/cli/tasks/eject.js:10:19)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)

npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.10.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `ng serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'ng serve'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the codelab package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ng serve
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs codelab
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls codelab
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/pvanloon/workspace/ng2-codelab/npm-debug.log

npm-debug.log:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 silly lifecycle [email protected]~prestart: no script for prestart, continuing
7 info lifecycle [email protected]~start: [email protected]
8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/pvanloon/workspace/ng2-codelab/node_modules/.bin:/usr/local/git/current/bin:/usr/local/bin:/usr/bin:/bin:/usr/local/sbin:/usr/sbin:/sbin:/usr/local/share/dotnet:/Library/Frameworks/Mono.framework/Versions/Current/Commands
10 verbose lifecycle [email protected]~start: CWD: /Users/pvanloon/workspace/ng2-codelab
11 silly lifecycle [email protected]~start: Args: [ '-c', 'ng serve' ]
12 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: `ng serve`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:877:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/pvanloon/workspace/ng2-codelab
17 error Darwin 16.4.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
19 error node v6.10.0
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error [email protected] start: `ng serve`
22 error Exit status 1
23 error Failed at the [email protected] start script 'ng serve'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the codelab package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     ng serve
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs codelab
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls codelab
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

I'm pretty happy with the current state of the vertical resizing (adjust to content) except the case when the first file has too many lines.

In that case editing the second file becomes painful.

Solution would be making the first file resizable after certain size?

This is test!

I'm currently using self built pseudo redux implementation, this choice was made because I had to get up to speed ASAP, and didn't know what the app would be like. So I felt like my own solution would be easier to adapt to the requirements given lack of time, and my incomplete understanding of redux or ngrx/store edge cases.

Now when I have more understanding of the structure of the app, it's time to migrate to either redux or ngrx/store. The benefit would be:

• No need to write tests for existing service code (will still need to write tests for reducers of course).
• Easier to understand the app structure for the external contributors.
• Ability existing tools, like redux debugger, etc.
• We can also potentially migrate to immutable data structures on the way, which would make a more efficient use of span.

I don't have any preference as of which one to use, let's discuss.

I'm also have a hard time estimating the amount of work involved, I feel like most likely it will be just going through the codebase and re-doing things in a new way.

Just a bonus. Can take this on, myself.

This is test!

This is part of #57
We need some space where we could experiment with different approaches for inlining slides.

First thing I would try:

1. Using https://github.com/gnab/remark
2. Something for the diagrams

TODO:

• Recreate these slides in the exercises folder.

Steps to reproduce:

• Add a lot of new lines
• Scroll down
• Edit the bottom line

I'm having a problem with this.

microsoft/monaco-editor#276

Here I would like to discuss the next steps for the codelab.
I'd like to focus on 2 things here:

• Making the codelab self-paced, to allow learning angular outside of the classroom.
• Simplify the process of creating new exercises. This would be a great format to learn not just more advanced angular, but also rxjs, TypeScript and many more things, and it should be really easy to create a codelab for those.

High priority

Inlining learning materials #57

Currently we're using google slides, that works well but has some drawbacks:

• Hard to translate in other languages, translators don't get notified on change, which means the slides will stay out of sync
• User has to jump between slides and the codelab manually which can be confusing
• Not flexible enough - it's not possible to have interactive examples in the slides.

Come up with a good and easy way to create new exercises. #58

The biggest challenge here is the progressive evolution of file content throughout the exercises.
e.g. if I fix a type in main.ts in exercise 1, it has to propagate through every exercise up to exercises 18.

Curently I'm using a home-grown diff markup language, but I would be curious to see what are better ways to do the same.

Medium priority

• Performance
• Bundle size
• Actually translating to other languages

This includes listening for key shortcuts in monaco, and triggering appropriate action

Owner of the npm package node-ts here. I'm suspecting that you actually want to install ts-node instead, since the library doesn't seem to look like it has anything to do with TeamSpeak.

Background:
Currently we have the learning materials in a Google Slides presentation, it's great, but it's really hard to translate, and it doesn't allow cool interactive demos and simple syntax highlighting.

My plan is to move learning materials to the code.

We need a solution which is:

• Translateable (there's a way to extract strings)
• Has syntax highlighting
• Easy to create/unterstand the materials
• Easy to collaborate with other people
• Allows interactivity

Options:

• Integrating and extending markdown slide engine, e.g. remarkjs
• Figuring out some way to embed and translate Google Slides
• Custom presentation engine build in angular
• Other options?

This is test!

We got a lot of great feedback for the course.

Now we need a way to import them into github, to simplify triaging, and to allow other people contribute to fixing it.

The issues are here:
https://docs.google.com/spreadsheets/d/1WoIb9WZMMdnjIHLKIz-7VNsk6oQYrXjwEXvDfn242bQ/edit?usp=sharing