Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

October 18, 2016

Angular 2: Getting Started Course Update

This post identifies the changes to the “Angular 2: Getting Started” Pluralsight course from its first release on April 1st, 2016 to its update October 18th, 2016.

Angular 2 first appeared around June of 2015 as alpha.27. The first beta release of Angular 2 was December 12, 2015, a great time to start on an Angular 2 getting started course. The first release of the “Angular 2: Getting Started” course was on April 1st, 2016. The code examples for the course were valid through Angular beta.15. From that time until release, Angular underwent numerous changes … some, such as the new router and the introduction of Angular modules, were significant.

Angular 2.0.0 was released on September 14th, 2016, so that was a great time to update the “Angular 2: Getting Started” course. The changes made to each module of the course are outlined below.

If you have already watched the course and want to minimize which modules to re-watch, I’d suggest modules 2, 10, 11, and 12. That would provide the basics on Angular modules (NgModule) and the new router.

Module 1: Introduction

  • Introduced Angular modules.
  • Updated Course Outline.

Module 2: First Things First

  • Demoed how to get a more current version of npm.
  • Revised setup steps including the application’s root Angular module.
  • Updated discussion of AngularCli.
  • Updated demos for setting up Angular 2.
  • Enhanced discussion in “About Modules” regarding the difference between ES modules and Angular modules.

Module 3: Introduction to Components

  • Updated demos for new import statements (import from @angular/… instead of angular2/…)
  • A first cut of the app.component.ts is now included as part of the starter files. This changes some of the initial steps when building the app.component.ts file.
  • Added a callout to point out the use of the back tick (not quotes) for defining the inline template.
  • Bootstrapping process now includes the application’s root Angular module.
  • Additional checklist for resolving issues when coding along.

Module 4: Templates, Interpolation, and Directives

  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Added steps to update the application’s root Angular module (AppModule).
  • Added information on how an Angular module defines the boundary or context within which the component resolves its directives and dependencies.
  • Added a demonstration of a common Angular error and how to fix it.
  • Updated the ngFor syntax to match the released syntax using the let keyword instead of #.

Module 5: Data Binding & Pipes

  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Added information on adding FormsModule to an Angular module so the template can use ngModel for two-way binding.

Module 6: More on Components

  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Updated the code for the pipe transform to match the new transform signature.
  • Added a step to add the custom pipe to an Angular module.
  • Added a clip on using component-relative paths by setting module Ids.

Module 7: Building Nested Components

  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Added a step to add the nested component to an Angular module.

Module 8: Services and Dependency Injection

  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Mentioned how service can be registered in an Angular module.

Module 9: Retrieving Data Using Http

  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Enhanced discussion of Observables.
  • Enhanced the comparison between Promises and Observables.
  • Removed the setup clip since these setup steps are no longer valid.
  • Added a step to add Http to an Angular module.
  • Separated out the exception handling to its own clip.

Module 10: Navigation and Routing Basics

  • Divided this course module into two modules: 10 and 11.
  • Major modifications throughout to change to the current router.
  • Expanded on the details for how routing works.
  • Enhanced the discussion of Html 5 vs hash style routes.
  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Added steps to add the remaining components to an Angular module.

Module 11: Navigation and Routing Additional Techniques

  • This new module is the second half of the prior module.
  • Major modifications throughout to change to the current router.
  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Added a clip on route guards.

Module 12: Angular Modules

  • This new module is all about Angular modules. It covers:
    • The definition and purpose of an Angular module.
    • Understanding the Angular module metadata and its many rules.
    • Refactoring the sample application and creating a feature module.
    • Minimizing repetition by creating a shared module.
    • Reexamining the root application module (AppModule).
    • A look at building separate routing modules.
    • And summarizing options for your Angular module architecture.

Module 13: Angular 2 Setup Revisited

  • Updated the demos to the Angular 2 release setup files.
  • Added discussion of the systemjs.config.js file.
  • Added discussion of the bootstrapping process differences for the Just in Time (JiT) compiler vs the Ahead of Time (AoT) compiler.
  • Added discussion of the Angular CLI.

Module 14: Final Words

  • Minor wording changes.

Enjoy!

45 Comments

  1.   Nirav Joshi — December 14, 2016 @ 3:14 am    Reply

    Hi Deborah,

    I really like your course on Angular JS2 which is very good. Thank you for it.

    > While configuring data services in your course you have static product.json file using which we get data . In my scenario where i have server which sends api query response in json and i am using it.

    When i try to load it in chrome i got following error message in Developer Debug tool
    “XMLHttpRequest cannot load http://127.0.0.1:8000/centurionapi/dwercnt. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access.”

    I googled it found work around to get plugin for chrome to off CORS but thats temporary. How would i avoid it completely irrespective of browser i am using it.

    Please help me on this.

    Please also give me some reference article where i can plot graph on my angular2 APP using the charts “http://valor-software.com/ng2-charts/” i followed this URL but could not go through much.

    Appreciate your help on this.

    Have Happy Holidays.!!

  2.   Dennis — December 22, 2016 @ 6:12 am    Reply

    This is probably the best angular 2 course I have seen so far! Great job! I learned so much!

    •   deborahk — December 29, 2016 @ 10:31 am    Reply

      Thank you SO much for the kind words! I sincerely appreciate them!

  3.   Dennis E Ward — January 4, 2017 @ 5:15 am    Reply

    Deborah – I’m trying to deploy an angular2 app to Azure, and am struggling with deployment. My ideal workflow is similar to your pluralsight course (which was terrific!) where you use a starter and add to it via Visual Studio Code:

    angular-cli (scaffold) -> edit -> submit to github -> website builds/deploys automatically in Azure

    I’m looking for a simple step-by-step solution, and I think angular2 deployment on Azure is far too difficult for a casual developer such as myself. Do you have any information about Azure deployment or know where I can go go get any? I’d love to see a deployment video from you on Pluralsight!

    Thanks, Dennis

  4.   Omar S — January 10, 2017 @ 3:42 am    Reply

    Just for the record, maybe you already corrected it, but >>import ‘rxjs/add/observable/throw’;<< is need in product.service.ts in order to be able to use Observable.throw()-function. Else an exception will be thrown by Angular.

    •   deborahk — January 27, 2017 @ 4:38 pm    Reply

      Hi Omar – In the version of Angular that I used for this course … this did not seem to be required. However, it is required for any newer version and is just a good practice. Thanks for letting me know!

  5.   Pankaj — January 14, 2017 @ 12:13 pm    Reply

    Hi Deborah,

    I watched your course on Pluralsight. There you explained bootstraping application in main.ts file, but when i downloaded the getting-started from your github it has bootstraping logic in app.module.ts class which you didn’t explain in your course. If these are the two ways then which is the better one. IMO bootstraping in main.ts had less code and seemed direct and simple but your latest has app.module.ts for bootstraping so there must be something to that. COuld you please explaing and if possible can add to the course as well. Thanks in advance.

  6.   sandeep patil — January 24, 2017 @ 2:06 pm    Reply

    Getting below error –

    ‘ppm-products’ is not a known element:
    1. If ‘ppm-products’ is an Angular component, then verify that it is part of this module.
    2. If ‘ppm-products’ is a Web Component then add “CUSTOM_ELEMENTS_SCHEMA” to the ‘@NgModule.schema’ of this component to suppress this message. (”
    {{pageTitle}}
    [ERROR ->]

    •   deborahk — January 27, 2017 @ 4:42 pm    Reply

      The course uses “pm-products” not “ppm-products”. Is it possible you have a typo somewhere?

  7.   ahmed — February 23, 2017 @ 7:24 am    Reply

    hey could u explain why i npm start not working the message shown by this :

    user@WIN-VDLTB86BO7F MINGW32 ~/Desktop/Angular2-GettingStarted-master/APM – Start
    $ npm start

    > product-management@1.0.0 start C:\Users\user\Desktop\Angular2-GettingStarted-master\APM – Start
    > tsc && concurrently “tsc -w” “lite-server”

    app/Product/product-list.component.ts(2,24): error TS2306: File ‘C:/Users/user/Desktop/Angular2-GettingStarted-master/APM – Start/app/Product/product.ts’ is not a module.

    npm ERR! Windows_NT 6.3.9600
    npm ERR! argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “start”
    npm ERR! node v7.5.0
    npm ERR! npm v4.1.2
    npm ERR! code ELIFECYCLE
    npm ERR! product-management@1.0.0 start: `tsc && concurrently “tsc -w” “lite-server” `
    npm ERR! Exit status 2
    npm ERR!
    npm ERR! Failed at the product-management@1.0.0 start script ‘tsc && concurrently “tsc -w” “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 product-management package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR! tsc && concurrently “tsc -w” “lite-server”
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR! npm bugs product-management
    npm ERR! Or if that isn’t available, you can get their info via:
    npm ERR! npm owner ls product-management
    npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request:
    npm ERR! C:\Users\user\Desktop\Angular2-GettingStarted-master\APM – Start\npm-debug.log

    user@WIN-VDLTB86BO7F MINGW32 ~/Desktop/Angular2-GettingStarted-master/APM – Start
    $

    user@WIN-VDLTB86BO7F MINGW32 ~/Desktop/Angular2-GettingStarted-master/APM – Start
    $

    •   deborahk — March 27, 2017 @ 2:01 pm    Reply

      Where you able to resolve this issue?

  8.   Steven Shourds — February 24, 2017 @ 3:38 am    Reply

    Hello, I am just starting with ang2 using visual studio code, node and lite-server. Really love it so far. I have a problem with slow down though. When I do npm start and start coding and saving, it automatically recompiles and updates the browser, but over time it gets really, really slow. After about 20 minutes, if I’ve made a bunch of changes and saved, it take up to 10-20 seconds to refresh the browser. I have to Ctrl C and restart npm start and it’s all fast again for another 20 minutes. Is there anything you can suggest to fix this? Thanks, really enjoying the course.. Steve

    •   Steven Shourds — February 24, 2017 @ 7:02 am    Reply

      Also, thought I’d post this. Found a post from Joha Papa a year ago.. but everything I am running seems current?

      “devDependencies”: {
      “@types/node”: “^4.2.1”,
      “@types/core-js”: “^0.9.35”,
      “@types/lodash”: “~4.14.52”,
      “concurrently”: “^2.2.0”,
      “lite-server”: “^2.2.0”,
      “tslint”: “^3.7.4”,
      “typescript”: “^2.1.5”
      },

    •   deborahk — March 27, 2017 @ 2:02 pm    Reply

      Were you able to resolve your issue? I have edited code all day and not experienced what you describe?

  9.   Tom — March 30, 2017 @ 12:01 pm    Reply

    I saw the APM-Start-Updated file in the downloaded starter files and read that it is updated for Angular 4. I’m just in the first chapter, but right away I notice that the files are different than some of the ones discussed in the presentation. To prevent confusion as I code along, would it be better to use the APM-Start for my starter instead? Which one will match the course content better?

    •   deborahk — March 31, 2017 @ 8:55 am    Reply

      To match the recording, use the APM – Start (NOT APM-Start-Updated) files. I updated the readme file in the github to clarify this.

  10.   Evan — April 7, 2017 @ 4:39 pm    Reply

    In the ‘Tying Routes to Actions’ section of the ‘Navigation and Routing Basics’ module, you say to delete the ‘selector: ‘pm-products” from the ProductListComponent. This made it so my program didn’t work. When I put it back, everything worked fine.

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2022 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs