Screencast Build an Angular App With Component Interaction & Routing JavaScript

  • Sergio Cruz


  1. Carlos de Souza Rodrigues Junior said

    Sergio and Gregg, awesome work, thanks. Sergio I'm very curious about development environment, your term is amazing. Can you tell for us what term and plugins you are using? What plugin for type script you are using on Atom? Thanks!

  2. Changez Shaikh said

    Great video, very informative!

    P.S. Races Component sounds like Racist Component! That had me in splits :)

  3. Faculty

    Sergio Cruz said

    Hey @Carlos! As far as my terminal I use Hyper ( and zsh ( to theme it. As far my text editor, I use Atom with Seti as a theme and atom-typescript as a plugin. I hope this helps :D

  4. xgqfrms said

    good job!

  5. Jonás Perusquía Morales said

    Nice work! It's great to have angular-cli so we don't have to write angular's boilerplate code and just concentrate into functionality

  6. apregadas said

    Great job, thank you, don't forget version 3 is already at our door! We'll need a new course.

  7. dondre said

    This tutorial is races -_-

  8. skondgekar said

    Great video Sergio and Gregg. Just one query. how can we run this along with a nodejs backend. Actually I am able to run angular2 using systemJS module loader but with webpack it looks like it is not working. Is there any way to statically compile and serve using nodejs?

  9. Faculty

    Sergio Cruz said

    @skondgekar you mean you want to render your Angular app on the server-side? If that is the case, then you should look into Angular Universal

    If you're just trying to add a node backend server in addition to Angular CLI, then an approach similar to the one presented in this link will work too, where you're just adding some npm scripts and running them in addition to the normal angular cli scripts.

  10. xenocrat said

    Having built my own version of the app while following the accelerating angular course, I'm trying to recreate the build in this Watch Us Build as well, and am running into some problems. There are no instructions as to initial set-up, I suppose it's obvious, but perhaps I'm doing wrong. Since if I clone the project at (branch start-here) I'm obviously going to be missing the node modules, I added the complete src directory structure to my own Angular CLI ng new 'PROJECT'.

    Perhaps something is getting broken because I'm getting the following error when running npm start:

    ERROR in ./src/app/races/race.service.ts Module build failed: Error: C:/Users/MyName/Development/codegrunt/WatchUsBuild-Angular2Final/src/app/races/race.service.ts (12,3): Return type of public method from exported class has or is u sing name 'Observable' from external module "C:/Users/MyName/Development/codegrunt/WatchUsBuild-Angular2Final/node_modules/rxjs/Observable" but cannot be named.) at checkDiagnostics (C:\Users\MyName\Development\codegrunt\WatchUsBuild-Angular2Final\node_modules\@ngtools\webpack\src\loader.js:115:15) at C:\Users\MyName\Development\codegrunt\WatchUsBuild-Angular2Final\nodemodules\@ngtools\webpack\src\loader.js:140:17 @ ./src/app/app.module.ts 16:0-51 @ ./src/app/index.ts @ ./src/main.ts @ multi main

    Any help is appreciated.

  11. Faculty

    Sergio Cruz said

    @xenocrat when you clone the project you need to cd into it and run npm install to get the node_modules directory. If none of this makes sense then I recommend going through our node.js material here on Code School as we do a quick intro into npm, etc.

  12. xenocrat said

    Thanks for the lightning-fast response Sergio. With that bit of instruction I was able to get it running immediately. I got off track trying to incorporate the Angular CLI instruction from the beginning of the video - which runs npm install automatically when creating a new project (so I didn't think to run it again). I should have remembered code school's package.json was (of course) going to be different. Thanks again.

  13. KaiRoeder said

    Pretty good tutorial - or should I say "really good"? ;-) Anyway, after doing the course and watching this tutorial I can't wait to start my first learning project on my own now.

    Good job!

  14. wkauwenbergh said

    After getting the source code from and serve it using ng serve i get these errors: GET http://localhost:4200/styles.css GET http://localhost:4200/app/races.json 404 (Not Found) There're no races shown. The files do exsist.

  15. Jessie Valladares said

    Same error as wkauwenbergh for me, has to do with the recent Angular CLI upgrade to @angular/cli: 1.0.0-rc.1, but I havent been able to solve the error, do you happen to have any useful links to good docs on observables? Thanks a lot!!

  16. ATTAH said

    I have the same problem with Jessie Valladares

  17. Cristian said

    Hey Sergio and Gregg. Great video! I'm wondering if you are planning to explain more about RxJS and Redux with Angular in a new video, that'd be nice!

  18. Kev Rad said

    I have the same problem as Jessie, looks like they need to update their dependency on their repo.

  19. Faculty

    Sergio Cruz said

    I upgraded the project to use @angular/cli 1.0 by default, so you all shouldn't be seeing those errors any longer :)

  20. HECTOR said

    Another great course ! . My first time doing Angular, and I got it all ! Thanks guy ! keep it up

  21. ajuneja13041991 said

    how do you open project in atom. what do you use to get symbol(underscore having dot).

    you typed atom (dot underscore) --

  22. ajuneja13041991 said

    Do we need to follow the same structure in Angular CLI ?? I don't want to stick to CLI. I want to use visual studio code. We don't need all the setting in tsconfig or package.json... why not to remove unnecessary code.

  23. Murat Ozcan said

    10/2017: do npm install -g @angular/cli instead of @angular-cli

  24. Bastian Lang said

    Thx Murat, this did the trick for me!

  25. Fabio Sungurlian said

    I've clone the repository and when I try to use "ng serve", It says that I'm not inside a angular-cli project. By the way, How can I check what version of Angular CLI I'm using? P.D.: I am running the commands in git bash inside the cloned repository.

About This Screencast

In this episode, we will take what you learned from the Accelerating Through Angular course by expanding on the app seen in the course. We will demonstrate how to scaffold an Angular app by using Angular CLI, how to make components communicate, and how routing works.

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now