johnpapa / angular-tour-of-heroes

Angular - Tour of Heroes - The Next Step after Getting Started

Getting Started

Super simple Angular app with 1 module and 2 routes. This is a minor variation on the Tour of Heroes I wrote for the official docs.

Get the Code

git clone https://github.com/johnpapa/angular-tour-of-heroes.git toh
cd toh
npm i

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

This project was generated with Angular CLI version 1.2.0.

angular-tour-of-heroes's Issues

[Still] Doesn't Work in IE

#24 was closed. The comments don't help. I suspect the person that got it working did something else which they didn't reveal.

TOH didn't work for IE11 in its Beta0 guise, and doesn't work in Beta6.

The plunker linked to from the angular.io Tour of Heroes first page doesn't work, and it clearly has the es6 shim loaded (which is the claimed solution in issue #24)
Pretty sure it's not me being stupid. Instructions followed exactly, and the code claims to support IE

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

All files loading, no 404s
Tried es6-shim 0.33.13 as specified by angular
Also forced Angular to use 0.34.4 but still no luck

system-config.js Not Found

I get this error in consol :

Failed to load resource: the server responded with a status of 404 (Not Found)
zone.js:232 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:8000/system-config.js

Refresh fails in child routes

Upon refreshing on routes like http://127.0.0.1:8080/detail/11 - Refresh fails, Need to reload http://127.0.0.1:8080/src to make it work

npm install fails

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

npm install broken after update to 2.1

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

Move from systemjs to webpack

I think everyone now is moving to webpack

Back button on /detail/{id} does nothing when opening a page in /details/{id}

As I pointed out in my comment to issue #33, if a user opens a page with link to /details/{id}, clicking the back button does nothing, because there is no history in the browser.

Thank you.

Issues AoT compilation

Hey.

I'm getting this error when I ran this

npm run start-aot
``

```js
npm info it worked if it ends with ok
npm verb cli [ '/Users/nzw118/.nvm/versions/node/v5.12.0/bin/node',
npm verb cli   '/Users/nzw118/.nvm/versions/node/v5.12.0/bin/npm',
npm verb cli   'run',
npm verb cli   'start-aot' ]
npm info using [email protected]
npm info using [email protected]
npm verb run-script [ 'prestart-aot', 'start-aot', 'poststart-aot' ]
npm info lifecycle [email protected]~prestart-aot: [email protected]
npm info lifecycle [email protected]~start-aot: [email protected]

> [email protected] start-aot /Users/nzw118/WorkspaceNg/angular2-tour-of-heroes
> npm run aot && npm run rollup && gulp copy-aot && npm run lite

npm info it worked if it ends with ok
npm verb cli [ '/Users/nzw118/.nvm/versions/node/v5.12.0/bin/node',
npm verb cli   '/Users/nzw118/.nvm/versions/node/v5.12.0/bin/npm',
npm verb cli   'run',
npm verb cli   'aot' ]
npm info using [email protected]
npm info using [email protected]
npm verb run-script [ 'preaot', 'aot', 'postaot' ]
npm info lifecycle [email protected]~preaot: [email protected]
npm info lifecycle [email protected]~aot: [email protected]

> [email protected] aot /Users/nzw118/WorkspaceNg/angular2-tour-of-heroes
> ngc -p tsconfig-aot.json

Error: Error File '/Users/nzw118/WorkspaceNg/angular2-tour-of-heroes/typings/index.d.ts' not found.
    at Object.check (/Users/nzw118/WorkspaceNg/angular2-tour-of-heroes/node_modules/@angular/tsc-wrapped/src/tsc.js:31:15)
    at Object.main (/Users/nzw118/WorkspaceNg/angular2-tour-of-heroes/node_modules/@angular/tsc-wrapped/src/main.js:26:15)
    at Object.<anonymous> (/Users/nzw118/WorkspaceNg/angular2-tour-of-heroes/node_modules/@angular/compiler-cli/src/main.js:14:9)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:148:18)
    at node.js:405:3
Compilation failed

npm verb lifecycle [email protected]~aot: unsafe-perm in lifecycle true
npm verb lifecycle [email protected]~aot: PATH: /Users/nzw118/.nvm/versions/node/v5.12.0/lib/node_modules/npm/bin/node-gyp-bin:/Users/nzw118/WorkspaceNg/angular2-tour-of-heroes/node_modules/.bin:/Users/nzw118/.nvm/versions/node/v5.12.0/bin:/Users/nzw118/.nvm/versions/node/v5.12.0/lib/node_modules/npm/bin/node-gyp-bin:/Users/nzw118/WorkspaceNg/angular2-tour-of-heroes/node_modules/.bin:/Users/nzw118/.nvm/versions/node/v5.12.0/bin:/Users/nzw118/.rvm/gems/ruby-2.3.0/bin:/Users/nzw118/.rvm/gems/ruby-2.3.0@global/bin:/Users/nzw118/.rvm/rubies/ruby-2.3.0/bin:/Users/nzw118/perl5/bin:/Users/nzw118/.nvm/versions/node/v5.12.0/bin:/usr/local/sbin:/opt/local/bin:/opt/local/sbin:/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/development/upf/apache-maven-3.1.1/bin:/Users/nzw118/bin:/Users/nzw118/Applications/mongodb-osx-x86_64-3.2.5/bin:/development/android-sdk-macosx/platform-tools:/development/android-sdk-macosx/tools:/Library/Frameworks/Python.framework/Versions/3.5/bin:/Applications/MacVim.app/Contents/MacOS/:/Users/nzw118/.rvm/bin
npm verb lifecycle [email protected]~aot: CWD: /Users/nzw118/WorkspaceNg/angular2-tour-of-heroes
npm info lifecycle [email protected]~aot: Failed to exec aot script
npm verb stack Error: [email protected] aot: `ngc -p tsconfig-aot.json`
npm verb stack Exit status 1
npm verb stack     at EventEmitter.<anonymous> (/Users/nzw118/.nvm/versions/node/v5.12.0/lib/node_modules/npm/lib/utils/lifecycle.js:239:16)
npm verb stack     at emitTwo (events.js:100:13)
npm verb stack     at EventEmitter.emit (events.js:185:7)
npm verb stack     at ChildProcess.<anonymous> (/Users/nzw118/.nvm/versions/node/v5.12.0/lib/node_modules/npm/lib/utils/spawn.js:24:14)
npm verb stack     at emitTwo (events.js:100:13)
npm verb stack     at ChildProcess.emit (events.js:185:7)
npm verb stack     at maybeClose (internal/child_process.js:850:16)
npm verb stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
npm verb pkgid [email protected]
npm verb cwd /Users/nzw118/WorkspaceNg/angular2-tour-of-heroes
npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/nzw118/.nvm/versions/node/v5.12.0/bin/node" "/Users/nzw118/.nvm/versions/node/v5.12.0/bin/npm" "run" "aot"
npm ERR! node v5.12.0
npm ERR! npm  v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] aot: `ngc -p tsconfig-aot.json`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] aot script 'ngc -p tsconfig-aot.json'.
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 angular2-tour-of-heroes package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ngc -p tsconfig-aot.json
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2-tour-of-heroes
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular2-tour-of-heroes
npm ERR! There is likely additional logging output above.
npm verb exit [ 1, true ]

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/nzw118/WorkspaceNg/angular2-tour-of-heroes/npm-debug.log

npm verb lifecycle [email protected]~start-aot: unsafe-perm in lifecycle true
npm verb lifecycle [email protected]~start-aot: PATH: /Users/nzw118/.nvm/versions/node/v5.12.0/lib/node_modules/npm/bin/node-gyp-bin:/Users/nzw118/WorkspaceNg/angular2-tour-of-heroes/node_modules/.bin:/Users/nzw118/.nvm/versions/node/v5.12.0/bin:/Users/nzw118/.rvm/gems/ruby-2.3.0/bin:/Users/nzw118/.rvm/gems/ruby-2.3.0@global/bin:/Users/nzw118/.rvm/rubies/ruby-2.3.0/bin:/Users/nzw118/perl5/bin:/Users/nzw118/.nvm/versions/node/v5.12.0/bin:/usr/local/sbin:/opt/local/bin:/opt/local/sbin:/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/development/upf/apache-maven-3.1.1/bin:/Users/nzw118/bin:/Users/nzw118/Applications/mongodb-osx-x86_64-3.2.5/bin:/development/android-sdk-macosx/platform-tools:/development/android-sdk-macosx/tools:/Library/Frameworks/Python.framework/Versions/3.5/bin:/Applications/MacVim.app/Contents/MacOS/:/Users/nzw118/.rvm/bin
npm verb lifecycle [email protected]~start-aot: CWD: /Users/nzw118/WorkspaceNg/angular2-tour-of-heroes
npm info lifecycle [email protected]~start-aot: Failed to exec start-aot script
npm verb stack Error: [email protected] start-aot: `npm run aot && npm run rollup && gulp copy-aot && npm run lite`
npm verb stack Exit status 1
npm verb stack     at EventEmitter.<anonymous> (/Users/nzw118/.nvm/versions/node/v5.12.0/lib/node_modules/npm/lib/utils/lifecycle.js:239:16)
npm verb stack     at emitTwo (events.js:100:13)
npm verb stack     at EventEmitter.emit (events.js:185:7)
npm verb stack     at ChildProcess.<anonymous> (/Users/nzw118/.nvm/versions/node/v5.12.0/lib/node_modules/npm/lib/utils/spawn.js:24:14)
npm verb stack     at emitTwo (events.js:100:13)
npm verb stack     at ChildProcess.emit (events.js:185:7)
npm verb stack     at maybeClose (internal/child_process.js:850:16)
npm verb stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
npm verb pkgid [email protected]
npm verb cwd /Users/nzw118/WorkspaceNg/angular2-tour-of-heroes
npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/nzw118/.nvm/versions/node/v5.12.0/bin/node" "/Users/nzw118/.nvm/versions/node/v5.12.0/bin/npm" "run" "start-aot"
npm ERR! node v5.12.0
npm ERR! npm  v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start-aot: `npm run aot && npm run rollup && gulp copy-aot && npm run lite`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular2-tour-of-heroes@0.1.0 start-aot script 'npm run aot && npm run rollup && gulp copy-aot && npm run lite'.
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 angular2-tour-of-heroes package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run aot && npm run rollup && gulp copy-aot && npm run lite
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2-tour-of-heroes
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular2-tour-of-heroes
npm ERR! There is likely additional logging output above.
npm verb exit [ 1, true ]

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

The process is looking for this file:

./angular2-tour-of-heroes/typings/index.d.ts

Question: hero search only works once, have to refresh the page.

I am using your example about the hero-search component, what I am trying to do is using for like a typeahead example. When I start my simple example the search/typeahead works fine. what I do on the click is populate the input box with the values selected from the values that came back, not direct to another page.

Now if I delete the text in the input box and want to try to do another search it does not work, If I refresh the page it works.

What I need to make it work with the ability to do more than one search at a time.

You can look at my repo called https://github.com/daBishMan/ng2-observables if you want to see what I am doing wrong.

Any help you can provide is greatly appreciated.

Typo at code summary of Multiple Components Chapter

In the summary segment, code written for app/app.module.ts reads:

import { HeroDetailComponent } from './hero-detail.component';

Which will throw an error. It is missing the right directory. It should instead be written as:

import { HeroDetailComponent } from './app.hero-detail.component';

Error when loading app

After npm install and npm run go

Some fixes

• On index.html I needed to change the base tag to
• In app.component.ts templateUrl should be template and styleUrl should be styles.

Tried to do a pull request but it did not work.

Thanks for the amazing job you do on the docs! :)

/Thomas

AOT broken

$ npm run start-aot


> [email protected] start-aot /private/tmp/angular2-tour-of-heroes
> npm run aot && npm run rollup && gulp copy-aot && npm run lite


> [email protected] aot /private/tmp/angular2-tour-of-heroes
> ngc -p tsconfig-aot.json

/private/tmp/angular2-tour-of-heroes/node_modules/@angular/compiler-cli/src/private_import_compiler.js:10
exports.AssetUrl = compiler_1.__compiler_private__.AssetUrl;
                                                  ^

TypeError: Cannot read property 'AssetUrl' of undefined
    at Object.<anonymous> (/private/tmp/angular2-tour-of-heroes/node_modules/@angular/compiler-cli/src/private_import_compiler.js:10:51)
    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> (/private/tmp/angular2-tour-of-heroes/node_modules/@angular/compiler-cli/src/reflector_host.js:13:33)
    at Module._compile (module.js:570:32)

Get below error

toh$ npm install
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No license field.

[email protected] postinstall /home/mkmani/toh
typings install

typings WARN deprecated 8/30/2016: "registry:dt/node#6.0.0+20160807145350" is deprecated (updated, replaced or removed)
typings WARN deprecated 7/25/2016: "registry:dt/core-js#0.0.0+20160602141332" is deprecated (updated, replaced or removed)

├── angular-protractor (global)
├── core-js (global)
├── jasmine (global)
├── node (global)
└── selenium-webdriver (global)

npm ERR! Linux 3.13.0-24-generic
npm ERR! argv "/home/mkmani/.nvm/versions/node/v4.4.5/bin/node" "/home/mkmani/.nvm/versions/node/v4.4.5/bin/npm" "install"
npm ERR! node v4.4.5
npm ERR! npm v2.15.5
npm ERR! code EPEERINVALID

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

npm ERR! Please include the following file with any support request:
npm ERR! /home/mkmani/toh/npm-debug.log

TOH from angular.io, doesn't recognize Promise

I was doing the step by step of the online Tutorial, and when I got to the point where it wanted me to add the Promise to the service, it no longer worked, both my Editor and the browser threw an error.

Cannot GET /app/heroes

Error 404 not found. I followed the same way decribed in tutorial. I am not getting how this api would work.

I am using angular-in-memory-web-api

TOH-6 Examples 'BAD FILENAME:' Problem

In 6th tutorial add, delete, edit section code examples has error like this:
BAD FILENAME: ../../../_fragments/toh-6/ts/app/hero.service-post.ts.md Current path: docs,ts,latest,tutorial,toh-pt6 PathToDocs: ../../../

Unit testing

Can you add unit testing?

Thank you!

Error on npm run lite

Tried running for the first time today. Please let me know if there are is any additional info I can provide.

$ npm start

[email protected] start D:\Users\Adam\dev\toh
npm-debug.log.txt

gulp copy-jit && concurrently "npm run tsc:w" "npm run lite"

[10:33:17] Using gulpfile D:\Users\Adam\dev\toh\gulpfile.js
[10:33:17] Starting 'clean'...
[10:33:17] clean
[10:33:17] Finished 'clean' after 9.64 ms
[10:33:17] Starting 'copy-jit'...
[10:33:17] copy jit
[10:33:17] Finished 'copy-jit' after 30 ms
Error occured when executing command: npm run lite
Error: spawn /bin/bash ENOENT
at exports._errnoException (util.js:907:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
at onErrorNT (internal/child_process.js:344:16)
at nextTickCallbackWith2Args (node.js:442:9)
at process._tickCallback (node.js:356:17)
at Function.Module.runMain (module.js:443:11)
at startup (node.js:139:18)
at node.js:974:3
Error occured when executing command: npm run lite
Error: spawn /bin/bash ENOENT
at exports._errnoException (util.js:907:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
at onErrorNT (internal/child_process.js:344:16)
at nextTickCallbackWith2Args (node.js:442:9)
at process._tickCallback (node.js:356:17)
at Function.Module.runMain (module.js:443:11)
at startup (node.js:139:18)
at node.js:974:3
[1] npm run lite exited with code -4058

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v4.6.0
npm ERR! npm v2.15.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: gulp copy-jit && concurrently "npm run tsc:w" "npm run lite"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'gulp copy-jit && concurrently "npm run tsc:w" "npm run lite" '.
npm ERR! This is most likely a problem with the angular2-tour-of-heroes package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp copy-jit && concurrently "npm run tsc:w" "npm run lite"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-tour-of-heroes
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls angular2-tour-of-heroes
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\Users\Adam\dev\toh\npm-debug.log

Back button on /detail/{id} view always takes you to the /heroes

The back button on /detail always takes you to the /heroes route, even if you arrive there from the root (dashboard).

I would assume that back will bring me to where I was before.

Thank you.

EDIT:

If I understand correctly, in order to do this, I need to import ComponentInstruction and OnActivate, implement OnActivate and get next + prev route representations.
I go to this part, but I cannot figure out how to convert ComponentInstruction to actual route.

this._router.navigateByInstruction(prev) does not work, since it expect Instruction with a property of type ComponentInstruction.

this._router.navigateByUrl(prev.urlPath) does OK when returning to /heroes, but throws an exception when returning to the dashboard with both "" and "/".

Template expressions interpolate to empty values

After just completing the first step (Show our Hero) in the tutorial of modifying the AppComponent and the template, I noticed that the {{title}} and {{hero}} template vars get compiled to empty values instead of the expected values.

I just see the word "details" on the page, without any errors in the console:

Everything is as-is from the Quickstart repo except my app.component.ts file which looks like this:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1><h2>{{hero}} details</h2>'
})

export class AppComponent {
  title: 'Tour of Heroes';
  hero: 'Windstorm';
}

Folder Structure to Follow Angular Guidelines

@johnpapa what are your thoughts on the file structure inside of app changing to fit the guidelines at https://angular.io/styleguide?

I'd be open to giving this a crack if it would be helpful.

It remains ever in "Loading..." mode

Hi, I'm following the tutorial "Tour of heros" and in the first page of the tutorial there is a link to the Tour of heroes demo.

I'm a beginner starting to learn Angular, so I don't know if this is the correct behavior and I have to wait, but the application ever shows "Loading..." and never loads...

What can I do to test the demo?

Failed to parse json error

node v6.9.2
npm v3.10.10
windows 10
npm ERR! code EJSONPARSE
npm ERR! Failed to parse json
npm ERR! Unexpected token '\u000' at 1:1
npm ERR!
npm ERR!^
...
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just Javascript.
npm ERR!
npm ERR! This is not a bug in npm.
npm ERR! Tel the pacage author to fix their package.json file. JSON.parse

This is after cloning this repository and running npm i

System is not defined error

Hi
This app works fine using npm start, however whenever I try to call it through localhost or file:// I get a System is not defined error, and all resources are not loaded.

I have also used the quickstart clone here https://github.com/angular/quickstart
I have completed the tutorial on the official angular 2 website using above as a template, in all cases I get the same error outside of npm start. Not a single version will run.

Strangely, I did the 5 Min Quickstart tutorial from the angular 2 website and this is OK in and outside of npm start, I can run the 5 Min index.html inside a browser from a file:// or localhost reference.

Any help would be appreciated, I really want to get to grips with ng2.

Further investigation shows no resources are being loaded:

Best Regards

Steve

npm start failed

[email protected] lite F:\dev\angular2\angular2-tour-of-heroes
lite-server

[BS] Access URLs:

---

   Local: http://localhost:3001
External: http://192.168.31.133:3001

---

      UI: http://localhost:3002

UI External: http://192.168.31.133:3002

---

[BS] Serving files from: ./
[BS] Watching files...
events.js:142
throw er; // Unhandled 'error' event
^

Error: spawn cmd ENOENT
at exports._errnoException (util.js:856:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:179:32)
at onErrorNT (internal/child_process.js:345:16)
at nextTickCallbackWith2Args (node.js:455:9)
at process._tickCallback (node.js:369:17)

npm ERR! Windows_NT 10.0.10240
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run-script" "lite"
npm ERR! node v5.2.0
npm ERR! npm v3.3.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] lite: lite-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] lite script 'lite-server'.
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 angular2-tour-of-heroes package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! lite-server
npm ERR! You can get their info via:
npm ERR! npm owner ls angular2-tour-of-heroes
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! F:\dev\angular2\angular2-tour-of-heroes\npm-debug.log

Process finished with exit code 1

npm install fail due to [email protected]

Hi!

Last angular (beta3) requires [email protected] but this version seems not working correctly

> [email protected] postinstall ~/temporary/angular2-tour-of-heroes/node_modules/zone.js
> tsd install

sh: 1: tsd: not found

[...]

npm ERR! node v4.2.3
npm ERR! npm  v2.14.17
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn

npm ERR! [email protected] postinstall: `tsd install`
npm ERR! spawn ENOENT

add gulp to TOH

As everybody uses gulp today it would be straight forward to add gulp to the TOH tutorial. This would take it one step further and demonstrate how to bundle the app production ready.

npm start modify index.html unexpectedly

When I do some changes in index.html, then npm start, the changes are removed and index.html recover to it's original content.
Don't know what is happening.

Has the tutorial changed in the last few days?

Hello!

Nice tutorial.
Just a question. I followed that until the Service chapter and everything was working properly.
I stop for 4-5 days and restart today with the chapter about Routing.
And something seems pretty different.

Now there is an app.module that before there wasn't..

Before my main.ts was looking like this:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

But in the tutorial now it looks like this:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

I am not going crazy right? There has been some recent changes?

As a matter of fact there is no app.module.ts file here..

Just the tutorial changed or also Angular 2?

Are we good to go with the new version or there will be more changes?

Properties: equal sign vs colon

Hi all,

I've never used Typescript before, so perhaps this is a super newbie question, but I've had some problems understanding the equal sign vs the colon in the tutorial. At the end of toh-pt2.html, the class looks like this:

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;
  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}

The tutorial does not explain what the difference is between an equal sign and a colon in the property assignment, but the code doesn't work if you switch them (ie: heroes: HEROES; or selectedHero = Hero;). "Let’s create a public property in AppComponent that exposes the heroes for binding." is how "heros = HEROES;" is described. "We no longer need the static hero property of the AppComponent. Replace it with this simple selectedHero property:" is how "selectedHero: Hero;" is defined.

It seems like we're using selectedHero as an object property, but that title and heroes are properties in the object? When do we need to use object properties(:) versus properties(=)?

Forget create method

Hello.
Great tutorial!

Just one thing: In the chapter 7, when creating a new hero, the create method of the hero service is not shown.

There is the code for the add button
The code for the add method of the heroes component
But not the code for the create method of the service

Doesn't work in IE11

Runs fine in Firefox, but on IE11/win7

SCRIPT438: Object doesn't support property or method 'keys'
File: angular2.dev.js, Line: 4030, Column: 5
Object doesn't support property or method 'keys'
    Evaluating http://127.0.0.1:8080/src/app/bootstrap.js
    Error loading http://127.0.0.1:8080/src/app/bootstrap.js

Error 1068: Property does not exist on type angular 2

Hello Everyone,

I am new in angular 2, i am making a "Dummy Form" form but it shows error in "Property required does not exist on type" in name filed.
I am compiling in JIT and AOT.
In JIT compiler shows error message but run my user form it is working properly. but when i compile with AOT shows compilation error.
I am reading the angular 2 form validation official doc here is the link https://angular.io/docs/ts/latest/cookbook/form-validation.html
Below is my Html Form and compiler Output.

Html Code

  <div >
    <h1>Hero Form 1 (Template)</h1>
    <form #heroForm="ngForm"  *ngIf="active"  (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" id="name" class="form-control"
               required minlength="4" maxlength="24"
               name="name" [(ngModel)]="hero.name"
               #name="ngModel" >
        <div *ngIf="name.errors && (name.dirty || name.touched)"
             class="alert alert-danger">
            <div [hidden]="!name.errors.required">
              Name is required
            </div>
            <div [hidden]="!name.errors.minlength">
              Name must be at least 4 characters long.
            </div>
            <div [hidden]="!name.errors.maxlength">
              Name cannot be more than 24 characters long.
            </div>
        </div>
      </div>
      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text" id="alterEgo" class="form-control"
               name="alterEgo"
               [(ngModel)]="hero.alterEgo" >
      </div>
      <div class="form-group">
        <label for="power">Hero Power</label>
        <select id="power" class="form-control"
                name="power"
                [(ngModel)]="hero.power" required
                #power="ngModel" >
          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
        </select>
        <div *ngIf="power.errors && power.touched" class="alert alert-danger">
          <div [hidden]="!power.errors.required">Power is required</div>
        </div>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
      <button type="button" class="btn btn-default"
             (click)="addHero()">New Hero</button>
    </form>
  </div>
</div>

Javascript Component

import { Component } from '@angular/core';
import { MyHero }      from './myhero';
@Component({
  moduleId:  module.id,
  selector: 'hero-form-template1',
  templateUrl: 'hero-form-template1.component.html'
})
export class HeroFormTemplate1Component {
  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
  hero = new MyHero();
  submitted = false;
  active=true;
  onSubmit() {
    this.submitted = true;
    console.log(this.hero);
  }
}

MyHero.ts File

export class MyHero {
  id: number;
  name: string;
  alterEgo:string;
  power:string;  
}

AOT compilation Output

Reload with typescript change is slow?

While project is running using "npm start" and we change a typescript file. It reloads after 5-6 seconds. If we change html file application reloads instantly.

Note: Looking at the console, typescript watcher kicks in after 5-6 seconds.

Has anyone else experienced this issue?

Thanks

not working in Mac when run npm start (installed the latest node and npm)

[email protected] start /Users/Will/Downloads/angular2-tour-of-heroes-master
tsc && concurrently "npm run tsc:w" "npm run lite"

app/dashboard.component.ts(23,13): error TS7006: Parameter 'heroes' implicitly has an 'any' type.
app/hero-detail.component.ts(23,13): error TS7006: Parameter 'hero' implicitly has an 'any' type.
app/hero.service.ts(9,12): error TS2304: Cannot find name 'Promise'.
app/hero.service.ts(13,16): error TS2304: Cannot find name 'Promise'.
app/hero.service.ts(13,32): error TS7006: Parameter 'resolve' implicitly has an 'any' type.
app/hero.service.ts(19,12): error TS2304: Cannot find name 'Promise'.
app/hero.service.ts(20,7): error TS7006: Parameter 'heroes' implicitly has an 'any' type.
app/hero.service.ts(20,31): error TS7006: Parameter 'hero' implicitly has an 'any' type.
app/heroes.component.ts(23,40): error TS7006: Parameter 'heroes' implicitly has an 'any' type.
node_modules/angular2/platform/browser.d.ts(77,90): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/application_ref.d.ts(83,60): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/application_ref.d.ts(83,146): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/application_ref.d.ts(96,51): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/application_ref.d.ts(96,147): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/application_ref.d.ts(133,90): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/application_ref.d.ts(171,81): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/change_detection/differs/default_keyvalue_differ.d.ts(23,15): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/change_detection/differs/default_keyvalue_differ.d.ts(25,16): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/change_detection/parser/locals.d.ts(3,14): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/change_detection/parser/locals.d.ts(4,42): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/debug/debug_node.d.ts(14,13): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/debug/debug_node.d.ts(24,17): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/debug/debug_node.d.ts(25,17): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/di/provider.d.ts(436,103): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/di/provider.d.ts(436,135): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/linker/compiler.d.ts(12,50): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/compiler.d.ts(16,41): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(108,136): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(156,150): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(197,128): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(203,127): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(204,141): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts(205,119): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/core/render/api.d.ts(13,13): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/core/render/api.d.ts(14,84): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/async.d.ts(27,33): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/async.d.ts(28,45): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/collection.d.ts(1,25): error TS2304: Cannot find name 'MapConstructor'.
node_modules/angular2/src/facade/collection.d.ts(2,25): error TS2304: Cannot find name 'SetConstructor'.
node_modules/angular2/src/facade/collection.d.ts(4,27): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(4,39): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(7,9): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(8,30): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(11,43): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(12,27): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(14,23): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(15,25): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/collection.d.ts(99,41): error TS2304: Cannot find name 'Set'.
node_modules/angular2/src/facade/collection.d.ts(100,22): error TS2304: Cannot find name 'Set'.
node_modules/angular2/src/facade/collection.d.ts(101,25): error TS2304: Cannot find name 'Set'.
node_modules/angular2/src/facade/lang.d.ts(4,17): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/lang.d.ts(5,17): error TS2304: Cannot find name 'Set'.
node_modules/angular2/src/facade/lang.d.ts(71,59): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/facade/promise.d.ts(2,14): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(8,32): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(9,38): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(10,35): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(10,93): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(11,34): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(11,50): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(12,32): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(12,149): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/facade/promise.d.ts(13,43): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/platform/browser/browser_adapter.d.ts(75,33): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/platform/dom/dom_adapter.d.ts(85,42): error TS2304: Cannot find name 'Map'.
node_modules/angular2/src/router/directives/router_outlet.d.ts(25,54): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/directives/router_outlet.d.ts(31,51): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/directives/router_outlet.d.ts(36,56): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/directives/router_outlet.d.ts(45,65): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/directives/router_outlet.d.ts(56,60): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/instruction.d.ts(124,34): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/instruction.d.ts(148,25): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/instruction.d.ts(164,34): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/instruction.d.ts(167,25): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/interfaces.d.ts(21,107): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/interfaces.d.ts(39,104): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/interfaces.d.ts(57,109): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/interfaces.d.ts(80,109): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/interfaces.d.ts(102,114): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/lifecycle/lifecycle_annotations.d.ts(29,100): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/route_config/route_config_impl.d.ts(101,19): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/route_definition.d.ts(20,20): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/route_definition.d.ts(35,20): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/route_registry.d.ts(52,66): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/router.d.ts(56,50): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/router.d.ts(68,46): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/router.d.ts(86,45): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/router.d.ts(99,34): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/router.d.ts(107,64): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/router.d.ts(112,85): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/router.d.ts(120,70): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/router.d.ts(128,43): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/router.d.ts(132,29): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/router.d.ts(138,19): error TS2304: Cannot find name 'Promise'.
node_modules/angular2/src/router/router.d.ts(146,70): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/CoreOperators.d.ts(35,67): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/CoreOperators.d.ts(50,66): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/CoreOperators.d.ts(89,67): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/CoreOperators.d.ts(94,38): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/CoreOperators.d.ts(94,50): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(46,62): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(47,42): error TS2304: Cannot find name 'Iterator'.
node_modules/rxjs/Observable.d.ts(103,74): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(103,84): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(143,66): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(158,65): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(201,66): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(206,38): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(206,50): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/ForkJoinObservable.d.ts(6,50): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/ForkJoinObservable.d.ts(7,58): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/FromObservable.d.ts(7,38): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/FromObservable.d.ts(7,51): error TS2304: Cannot find name 'Iterator'.
node_modules/rxjs/observable/PromiseObservable.d.ts(9,31): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/PromiseObservable.d.ts(10,26): error TS2304: Cannot find name 'Promise'.

npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.2.2
npm ERR! npm v3.9.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: tsc && concurrently "npm run tsc:w" "npm run lite"
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script 'tsc && concurrently "npm run tsc:w" "npm run lite" '.
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 angular2-tour-of-heroes package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc && concurrently "npm run tsc:w" "npm run lite"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-tour-of-heroes
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-tour-of-heroes
npm ERR! There is likely additional logging output above.

any plan to upgrade to angular2 rc

any plan to upgrade to angular2 rc?

splitting components in folders

I was trying to split this component tutorial in folder as the app folder is starting to be a bit crowded, my aim to arrive to situation like:

app/
├── README.md
├── app.component.css
├── app.component.ts
├── dashboard
│   ├── dashboard.component.css
│   ├── dashboard.component.html
│   └── dashboard.component.ts
├── hero-detail
│   ├── hero-detail.component.css
│   ├── hero-detail.component.html
│   └── hero-detail.component.ts
├── dashboard
│   ├── heroes.component.css
│   ├── heroes.component.html
│   └── heroes.component.ts
├── interfaces
│   └── hero.ts
├── main.ts
├── mock-heroes.ts
└── services
    └── hero.service.ts

That looks much like a real application structure but I'm having issues with SystemJs and the import path translation.

As I move a component inside a folder I start getting errors like:

Failed to load http://localhost:3000/node_modules/angular2/core.d

It looks like the .ts is removed somewhere. Any hint on how to fix this error?

If needed my current attempt is tracked here: https://github.com/teone/angular2-sample/tree/develop

Thanks

Direct links to details view do not work with default lite-server config

I spent a great deal of time trying to figure out how I'd broken my ToH app, as I kept getting a ton of 404 errors and Uncaught ReferenceError: System is not defined. After a while, I realized that the error only happened when BrowserSync would refresh in details view.

lite-server is designed to tackle this specific sort of issue, but the Angular 2 QuickStart repo doesn't include a bs-config file to set that up.

Considering that the routing section of the ToH tutorial sites deep linking specifically, I feel like it might be a good idea to either mention this as a known issue during the tutorial, or to advise creating a bs-config file with the appropriate configs set.

Another possible, if less pretty, solution would be to suggest using the HashLocationStrategy. Of the two, I recommend the first.

reflect-metadata shim is required

Hi, I pulled the source
npm i
npm run both
It looks like it got an error in loading
"
reflect-metadata shim is required when using class decorators
Error loading http://localhost:3000/app/boot.js"

AOT Broken again

Hi,

I'm not sure if I'm forgetting something but I keep getting this error when I try to use aot with this project:

> [email protected] start-aot /home/user/Apps/angular2-tour-of-heroes
> npm run aot && npm run rollup && gulp copy-aot && npm run lite


> [email protected] aot /home/user/Apps/angular2-tour-of-heroes
> ngc -p tsconfig-aot.json

Error: Error at /home/user/Apps/angular2-tour-of-heroes/app/main-aot.ts:3:36: Cannot find module '../aot/app/app.module.ngfactory'.
    at check (/home/user/Apps/angular2-tour-of-heroes/node_modules/@angular/tsc-wrapped/src/tsc.js:31:15)
    at Tsc.typeCheck (/home/user/Apps/angular2-tour-of-heroes/node_modules/@angular/tsc-wrapped/src/tsc.js:86:9)
    at /home/user/Apps/angular2-tour-of-heroes/node_modules/@angular/tsc-wrapped/src/main.js:33:23
    at process._tickCallback (internal/process/next_tick.js:103:7)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3
Compilation failed

It is the only error that I get, after setting the project as such:

• Cloning
• $ npm i # No errors
• $ npm run start-aot

Methods in HeroService

HeroesComponent calls getHeroes() from HeroService. There is no "getHeroes()" method in HeroService. HeroService does have a method getHero(id: number).

Bundle all Js

There is any simple way to concat all Js files in a single one?

Thank you!

Trying to use express server to serve angular2 application as static content not working

Hi,

I am trying to create angular2 application with express server. The applications loads fine but it is not able to resolve the html paths from express server.

Please find the code
https://github.com/SomethingWhichWorks/typescript-express-angular-module

I tried simple todo's app on 'master' branch and tried same on 'angular2-tour-of-heros' on 'alignment-with-angular-2.1.0' branch.

But in both cases, the html content is not found.
zone.js:1274GET http://localhost:3000/app/hero-search.component.html 404 (Not Found)
Failed to load http://localhost:3000/app/hero-search.component.html
zone.js:1274GET http://localhost:3000/app/dashboard.component.html 404 (Not Found)
zone.js:1274GET http://localhost:3000/app/heroes.component.html 404 (Not Found)
zone.js:1274GET http://localhost:3000/app/hero-detail.component.html 404 (Not Found)
zone.js:1274 GET http://localhost:3000/app/app.component.css 404 (Not Found)

Could you please advise on this.

App loading twice initially

Hi, I am new to angular 2 and I've upgraded the my application from RC4 to latest version and everything is working fine except the application loading twice initially by running with npm start command. I downloaded angular2-tour-of-heroes and run with JIT and same issue I found here as well.

Could you please let me know is this issue or is it functionality.
Thanks in advance

npm install throws errors

I try to run npm i and get the follow:

npm WARN package.json [email protected] No repository field.
npm WARN unmet dependency /Users/robsimpson/Repos/angular2-tour-of-heroes/node_modules/lite-server/node_modules/browser-sync/node_modules/socket.io/node_modules/socket.io-client/node_modules/engine.io-client requires debug@'1.0.4' but will load
npm WARN unmet dependency /Users/robsimpson/Repos/angular2-tour-of-heroes/node_modules/lite-server/node_modules/browser-sync/node_modules/socket.io/node_modules/socket.io-client/node_modules/debug,
npm WARN unmet dependency which is version 0.7.4
npm WARN unmet dependency /Users/robsimpson/Repos/angular2-tour-of-heroes/node_modules/lite-server/node_modules/browser-sync/node_modules/socket.io/node_modules/socket.io-client/node_modules/engine.io-client requires parseuri@'0.0.4' but will load
npm WARN unmet dependency /Users/robsimpson/Repos/angular2-tour-of-heroes/node_modules/lite-server/node_modules/browser-sync/node_modules/socket.io/node_modules/socket.io-client/node_modules/parseuri,
npm WARN unmet dependency which is version 0.0.2
npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.1.2
npm ERR! npm  v2.14.4
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 start

argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v4.2.6
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: gulp copy-jit && concurrently "npm run tsc:w" "npm run lite"
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script 'gulp copy-jit && concurrently "npm run tsc:w" "npm run lite" '.
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 heroes package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp copy-jit && concurrently "npm run tsc:w" "npm run lite"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs heroes
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls heroes
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Web/angular/heroes/npm-debug.log

use `Location.back()` instead of `window.history.back()`

I was just wondering if it would make more sense to use Location.back() instead of window.history.back() on this line. The latter seems tightly coupled with the environment, in this case the browser.

TOH Tutorial - getHeroesSlowly not working in IE11

I'm very happy following the tutorial and learning Angular2. Thanks!!

I got to the bottom of the latest chapter and created my getHeroesSlowly method, but the heroes list wouldn't show up in IE11. I tried refreshing and pasting the URL into a new IE11 to no avail. I tried the URL in Chrome, and it worked fine. Note that for IE11, I have the <script src="node_modules/es6-shim/es6-shim.js"></script>
and my package.json has
"es6-promise": "^3.0.2", "es6-shim": "^0.33.3",

Also, I got the getHeroesSlowly to work in IE11 once with a 100 milli delay instead. But I'm not sure if I did something magical as I haven't been able to recreate that.

Note that in MS Code, the Typescript wasn't happy with getHeroesSlowly. I didn't know what to do, but searched online and found that I had to change it to return new Promise<Hero[]>... and then import {Hero}...
getHeroesSlowly(){ return new Promise<Hero[]>(resolve => setTimeout(()=>resolve(HEROES), 2000) //2 seconds ); }
I'm guessing the above is probably because I switched to noImplicitAny=true

The Hero Editor: Issue with Multi-Line Template Strings

I am new to Angular 2. While attempting part 2 of the challenge I encountered an issue with the multi-line templating for this tutorial. The tutorial instructs us to write the template as follows:

@Component({
  selector: 'my-app',
  template: 
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>

})

Which in turn throws an error on VS Code (see screenshot below) and Chrome is unable to read the template.

However when I rewrite it back in its original format (as a single-line template string). It works fine:

@Component({ selector: 'my-app', template: "<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label><input [(ngModel)]='hero.name' placeholder='name'></div>" })

Am I missing something here? I followed the Quickstart tutorial word-for-word. I would like to learn how to use multi-line template strings in the future.

Thanks.