Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

March 31, 2017

“Angular Routing” Problem Solver

This blog post supports the sample code for the “Angular Routing” course on Pluralsight, identifying common issues along with their solutions.

The content of this post is based on Angular version >= 2.x unless explicitly stated otherwise.

The sample code can be found here: https://github.com/DeborahK/Angular-Routing. The folders in this repo include:

  • APM–Start: The starter files. Use this as a starting point to code along with the course. Updated to Angular v4.
  • APM–Final: The completed files. This code matches with the demos presented in the course. Updated to Angular v4.

Please post to the Discussion tab for the course if you experience an issue not found in this post. Thanks!

Here’s What Developers are Saying About the “Angular 2: Getting Started” Course

Filed under: Angular @ 2:05 pm
Tags: , ,

I had well over 1000 comments in the “Angular 2: Getting Started” discussion section (and another 1200+ for the Angular beta version of the course) before livefyre shut it down. Here is a sample of some of the great comments left by course viewers:

What Developers Are Saying

I always thought Angular was hard, but your way of explaining it makes it easy to understand and fun.

Extreme quality tutorial as always!

Many thanks for this really good introduction to Angular 2. It is so refreshing to come across a course that I can understand.

I just completed the course.  It has been one of the best training courses I’ve viewed.  I came into this course not liking the idea of a paradigm shift from Angular 1 to 2, but after viewing this course, I like 2 much better than 1.

Maybe the best tutorial I’ve seen of all programming tutorials. Love the way how you start and finish every module with checklists and revisitings. Angular 2 seems so easy to learn with you.

I have been using Angular 1.5 for over a year in a pure .net environment.  I was confused by the many Angular2 training options that did not fully explain Node and NPM.  Your course has opened my eyes.  Thank you for your explanations.  Great  job!  And great course!!

Thank you for the awesome course, Deborah! I really enjoyed it, learned a lot and chuckled quite a few times – especially at the "ng for nnngular" and you going "Yay!" every time something works – mainly because I do the exact same while I’m coding! :)  Really informative, easy to follow and information rich course – thank you!

Your course is one of the best, if not the best in Pluralsight and it has made learning Angular 2 fun and a lot less stressful.

Finished up the course yesterday and I must say it was a great learning experience.  Your organization and content is very well thought out (I’m sure I’ll revisit the checklists at the end of each module many times.)  Your delivery and pace were also excellent.

If you would be my teacher in the college ,then i would have given 100% attendance. Haha 😛 . You explain everything in a very good manner :).

This course is awesome. Impressive clarity.

Such a great course! Really made me understand the basic patterns of Angular 2, which was all very confusing for me before taking the course. Thank you!

Thank you for the SUPERP material on Angular 2. I have been following along your course and able to build my project.

Excellent method of teaching. Organized, lucid, coherent, structured.

Great course! How can anyone watch it just once?

Thanks for very useful course, I have completed the course and start doing my own angular 2 project for web application.

Just wanted to tell you how much I enjoyed your course, it’s given me a good foundation for angular2.

i really enjoy this course  it is great for beginners.

Thanks for a wonderful angular2 getting started course! It’s really helpful.

Thanks for a wonderful insight into Angular 2.

Outstanding. Teaching is an art which you have it in you. Thank you so much.

Thanks for the awesome course. I really enjoyed it.

your course is one of my favorite in the pluralsight. you are doing a great job!

This is a wonderful course, thank you.

thank you so much for your wonderful tutorial . I really love your teaching method . make them easy to understand.

Thank you for this great course. It is so detail and easy to follow.

Thank you for a great course. I loved the little bits of personality that you dropped in randomly. It makes a big difference for me.

A very good and detailed course; in-particular the recap and the end of each module and the really good slides. I am keeping those as reference diagrams on my wall.

Awesome course, Deborah is so clear and organized that even an idiot like me can understand.

This is a very exciting tutorial. I have learned so easy the Angular 2 base knowledge. Thank you very much.

Great course Deborah. Its become my reference point for all things Angular2.

Very helpful and structured tutorials! I wish I found out about these earlier.

Thanks Deborah for an excellent tour of Angular 2. Course content/speed is just too good. 5 stars from me.

Thank you for such a wonderful course. I was able to build a small app with your course guidance.

Great course, enjoying it very much, and particularly appreciate the way you present the material in a way where you deliberately encounter the same issues other "newbies" to Angular would encounter, and present the very logical resolutions to them. In that way I’m coming the appreciate the plumbing required so much more quickly than via some other resources I’ve been using.

Excellent content, your course coupled with John Papa’s course really helped me  get up and running with Angular 2. You are very thorough in your coverage, keep up the good work…

Fantastic, fantastic job — clear, comprehensive throughout, with clearly explained and shown examples.

Thanks Deborah for this wonderful and easily understandable course.Your course is designed and explained in such a wonderful way that after this course i do not require to search for another.Great job…….

You are an excellent tutor. I am loving the course and in spite of having no knowledge about angular JS version 1 i am getting a hold of angular 2. Thanks a ton.

Thank you for this fantastic course on Angular 2. Having never programmed in Angular 2 before, I found this course to be very helpful on the basic concepts of Angular 2. The amount of of time and detail spent on each topic contributed greatly to my understanding of programming in Angular 2. I very much look forward to your next course on Angular 2 – Angular 2: Reactive Forms.

Thanks Deborah for another excellent course.  I finished it without any problems.  Keep them coming 🙂

Super course I thoroughly enjoyed and went through it twice.

You are the most amazing tutor because:

  • You make everything so simple to understand.
  • Rather bluntly developing app and saying "What to do?", you take the time to say "Why to do it?".
  • You gave clear insight by going to every minute details. It is important to understand the basics.
  • You repeat and remind the concepts to make it familiar. It makes remembering them easy.
  • After completing this course, I now understand Architecture of Angular Application. So, I can develop manageable angular applications.

What Developers Are Requesting

Could you add additional lesson for paging service in future, in addition to firebase database with angular 2?

It would be great if you can throw some light on how to make use of font-awesome css & icons in the same project.

Kindly share the course or session on JIT & AOT

using npm behind a corporate proxy is a major hassle.  Is this addressed in a class somewhere?

I would like to have lectures on Security ( Angular2 application in banking domain ) and Unit testing.

A course on a web framework is incomplete IMO without coverage on working with forms data as intended by that framework.
Basic CRUD, even if with a mocked-up in-memory storage. [Covered in “Angular 2: Reactive Forms”]

Up next, NodeJS, React or React Native maybe?

Record an Ionic 2 course please!

It would be nice to see an advanced version for it. Something with Animations, Authorization, automatic build, testing. Things like that. [Covered in “Angular 2 Fundamentals”]

In your next course can you pl address some advanced topics like Forms, Security, Angular Material2. [Forms are covered in “Angular 2: Reactive Forms”]

January 9, 2017

Angular Route Ordering

Filed under: Angular @ 10:02 am
Tags: , ,

The content of this post is based on Angular version >= 2.x unless explicitly stated otherwise.

In Angular, the ordering of the routes in the route configuration matters. And when using feature and routing modules, it is easy to get the routes out of their needed sequence.

Basic Configuration

The following is an example Angular route configuration commonly defined in an app.module.ts file:

RouterModule.forRoot([

  { path: ‘welcome’, component: WelcomeComponent } ,

  { path: ‘products’, component: ProductListComponent },

  { path: ‘product/:id’, component: ProductDetailComponent }

  { path: ”, redirectTo: ‘welcome’, pathMatch: ‘full’},

  { path: ‘**’, redirectTo: ‘welcome’, pathMatch: ‘full’ }

])

The welcome route displays the template for the Welcome Component. (www.mysite.com/welcome)

The products route displays the template for the Product List Component. (www.mysite.com/products)

The product/:id route is a parameterized route. It displays the template for the Product Detail Component with the product defined by the id parameter. (www.mysite.com/product/42)

The empty path specifies a default route. This is the route that is matched when no path is specified. In this example, the default route redirects to the welcome route. (www.mysite.com)

The ** defines a wildcard path. This is the route that is matched when no other prior route is matched. It is often used for displaying a 404 (not found) page. But in this example, it redirects to the welcome route. (www.mysite.com/hello)

These routes are processed from top to bottom and the first match wins.

If we moved the wildcard path up to the top of the list like this:

RouterModule.forRoot([

  { path: ‘**’, redirectTo: ‘welcome’, pathMatch: ‘full’ }

  { path: ‘welcome’, component: WelcomeComponent } ,

  { path: ‘products’, component: ProductListComponent },

  { path: ‘product/:id’, component: ProductDetailComponent }

  { path: ”, redirectTo: ‘welcome’, pathMatch: ‘full’}

])

None of the other routes would ever be matched. The wildcard would always be picked first. So take care on the ordering of the routes in your route configurations.

Feature Modules

As an application gets larger, it is best to break out the features into their own feature modules. This makes the code easier to work with and maintain.

In the above example, we can refactor the product features out of the app.module.ts and add them to their own product.module.ts (ProductModule):

RouterModule.forChild([
    { path: ‘products’, component: ProductListComponent },
    { path: ‘product/:id’, component: ProductDetailComponent },
])

The resulting app.module.ts routes then look like this:

RouterModule.forRoot([

  { path: ‘welcome’, component: WelcomeComponent },

  { path: ”, redirectTo: ‘welcome’, pathMatch: ‘full’ },

  { path: ‘**’, redirectTo: ‘welcome’, pathMatch: ‘full’ }

]),

ProductModule

But wait! Isn’t our wildcard route now ahead of our product routes? How will our product routes ever be matched?

As it turns out, Angular handles this differently than we may expect. When the RouterModule.forRoute or RouterModule.forChild is used directly, it is processed last. All of the Angular modules (such as ProductModule) are processed first. So even though we define the wildcard route above ProductModule in this example, the routes defined in the RouterModule.forRoot() are moved to the end and processed last. So all of our routes still work as expected.

Routing Modules

In some cases, we may want to remove the routes from the app.module.ts and move them to their own module, such as app-routing.module.ts (AppRoutingModule):

RouterModule.forRoot([

{ path: ‘welcome’, component: WelcomeComponent },

{ path: ”, redirectTo: ‘welcome’, pathMatch: ‘full’},

{ path: ‘**’, redirectTo: ‘welcome’, pathMatch: ‘full’ }

])

If we then simply replace the routes in app.module.ts with the routing module like this:

AppRoutingModule,

ProductModule

Our product routes will stop working. Now that all of our routes are in modules, they are processed in their defined order. So the wildcard path in the AppRoutingModule will come *before* any of the routes defined in the ProductModule.

The app.module.ts modules must instead be defined in the appropriate order:

ProductModule,

AppRoutingModule

For more information on routing, check out my Pluralsight course: “Angular 2: Getting Started

For a code example, check out my github repo.

Enjoy!

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!

October 17, 2016

“Angular 2: Reactive Forms” Problem Solver

This blog post supports the sample code for the “Angular 2: Reactive Forms” course on Pluralsight, identifying common issues along with their solutions.

TBD

May 27, 2016

Angular 2: Filtering a List Using a Computed Property and ngModelChanged

Filed under: Angular @ 4:43 pm
Tags: , , ,

In my Pluralsight course: “Angular 2: Getting Started”, I demonstrate how to filter a list of products for display using a custom pipe. However, using a custom pipe does not provide easy access to the filtered result. For example, say you also want the count of the filtered list so you can display “5 of 125” or access other information about the list. In these cases, it is best to filter without using a custom pipe. This post shows you one technique: using a computed property and the ngModelChanged event.

Additional techniques for solving this problem are:

This post updates the code available from my github repo. So starting with that code:

1. Change the declarations adding a productsFiltered computed property. The productsFiltered property will contain the filtered list of products.

pageTitle: string = ‘Product List’;
imageWidth: number = 50;
imageMargin: number = 2;
showImage: boolean = false;
listFilter: string;
errorMessage: string;
products: IProduct[];
productsFiltered: IProduct[];

2. Add an onFilterChanged event handler that executes each time the filter input box is changed:

onFilterChanged(filter: any) { 
    this.listFilter = filter;
    filter = filter ? filter.toLocaleLowerCase() : null;
    this.productsFiltered = filter ? this.products.filter((product: IProduct) =>
        product.productName.toLocaleLowerCase().indexOf(filter) !== -1) : this.products;
}

This code sets the listFilter property and re-filters the list every time the listFilter input box changes. (Recall that we’ve removed the two-way binding, so we need to manually set the listFilter property.)

This is not enough, however. When the page is first displayed the product array is empty so nothing appears on the page. We need to initialize the computed property when the product data is retrieved.

3. One way to set the computed property when the data is retrieved is to modify the ngOnInit() method as follows:

ngOnInit(): void {
       this._productService.getProducts()
                 .subscribe(
                   products => this.onProductsRetrieved(products),
                   error =>  this.errorMessage = <any>error);
}

When the products are retrieved, this code calls the onProductsRetrieved method.

4. Create the new onProductsRetrieved method as follows:

onProductsRetrieved(products: IProduct[]) {
     this.products = products;
    this.productsFiltered = products;

}

This code sets the retrieved products to our product property and initializes our computed property.

5. The only other changes are to the template:

<input type=’text’ (ngModelChange)=’onFilterChanged($event)’ [ngModel]=’listFilter’ />

This separates the two-way binding into its one-way property binding with the [ngModel] and the one-way event binding with (ngModelChange). Whenever the model changes, the onFilterChanged method is called.

6. And change the template binding:

<tr *ngFor=’let product of productsFiltered‘>

This now binds to the productsFiltered property and no longer needs the pipe. We can then also bind other elements to this property or this property’s count method as needed.

Enjoy!

Angular 2: Filtering a List Using a Computed Property and Events

Filed under: Angular @ 1:10 pm
Tags: , , ,

In my Pluralsight course: “Angular 2: Getting Started”, I demonstrate how to filter a list of products for display using a custom pipe. However, using a custom pipe does not provide easy access to the filtered result. For example, say you also want the count of the filtered list so you can display “5 of 125” or access other information about the list. In these cases, it is best to filter without using a custom pipe. This post shows you one technique: using a computed property and the input event.

Additional techniques for solving this problem are:

This post updates the code available from my github repo. So starting with that code:

1. Change the declarations adding a productsFiltered computed property. The productsFiltered property will contain the filtered list of products.

pageTitle: string = ‘Product List’;
imageWidth: number = 50;
imageMargin: number = 2;
showImage: boolean = false;
listFilter: string;
errorMessage: string;
products: IProduct[];
productsFiltered: IProduct[];

2. Add an onFilterChanged event handler that executes each time the filter input box is changed:

onFilterChanged(event: any) {
    let filter = event.target.value;
    filter = filter ? filter.toLocaleLowerCase() : null;
    this.productsFiltered = filter ? this.products.filter((product: IProduct) =>
        product.productName.toLocaleLowerCase().indexOf(filter) !== -1) : this.products;
}

This code re-filters the list every time the listFilter input box changes.

This is not enough, however. When the page is first displayed the product array is empty so nothing appears on the page. We need to initialize the computed property when the product data is retrieved.

3. One way to set the computed property when the data is retrieved is to modify the ngOnInit() method as follows:

ngOnInit(): void {
       this._productService.getProducts()
                 .subscribe(
                   products => this.onProductsRetrieved(products),
                   error =>  this.errorMessage = <any>error);
}

When the products are retrieved, this code calls the onProductsRetrieved method.

4. Create the new onProductsRetrieved method as follows:

onProductsRetrieved(products: IProduct[]) {
     this.products = products;
    this.productsFiltered = products;

}

This code sets the retrieved products to our product property and initializes our computed property.

5. The only other changes are to the template:

<input type=’text’ (input)=’onFilterChanged($event)’ [(ngModel)]=’listFilter’ />

This binds the input event to the onFilterChanged event handler, passing in the event information.

NOTE: The input event is not supported in all browsers.

6. And change the template binding:

<tr *ngFor=’let product of productsFiltered‘>

This now binds to the productsFiltered property and no longer needs the pipe. We can then also bind other elements to this property or this property’s count method as needed.

Enjoy!

Angular 2: Filtering a List Using a Computed Property and Setter

Filed under: Angular @ 12:34 pm
Tags: ,

In my Pluralsight course: “Angular 2: Getting Started”, I demonstrate how to filter a list using a custom pipe. However, using a custom pipe does not provide easy access to the filtered result. For example, say you also want the count of the filtered list so you can display “5 of 125” or access other information about the list. In these cases, it is best to filter without using a custom pipe. This post shows you one technique: using a computed property and a setter.

Additional techniques for solving this problem are:

This post updates the code available from my github repo. So starting with that code:

1. Change the declarations making the listFilter a private property and adding a productsFiltered computed property. The productsFiltered property will contain the filtered list of products.

pageTitle: string = ‘Product List’;
imageWidth: number = 50;
imageMargin: number = 2;
showImage: boolean = false;
private _listFilter: string;
errorMessage: string;
products: IProduct[];
productsFiltered: IProduct[];

2. Add a property getter and setter for the listFilter property as follows:

get listFilter(): string {
    return this._listFilter;
}

set listFilter(filter: string) {

    this._listFilter = filter;
    filter = filter ? filter.toLocaleLowerCase() : null;
    this.productsFiltered = filter ? this.products.filter((product: IProduct) =>
        product.productName.toLocaleLowerCase().indexOf(filter) !== -1) : this.products;
}

The getter returns the private variable and is used by the template bindings to display the entered filter string. The setter sets the private variable and re-filters the list every time the listFilter property changes.

This is not enough, however. When the page is first displayed the product array is empty. So this code returns an empty collection and nothing appears on the page. We need something to reset this filter when the product data is retrieved.

3. One way to set the listFilter when the data is retrieved is to modify the ngOnInit() method as follows:

ngOnInit(): void {
       this._productService.getProducts()
                 .subscribe(
                   products => this.onProductsRetrieved(products),
                   error =>  this.errorMessage = <any>error);
}

When the products are retrieved, this code calls the onProductsRetrieved method.

4. Create the new onProductsRetrieved method as follows:

onProductsRetrieved(products: IProduct[]) {
    this.products = products;
    this.listFilter = ”;
}

This code sets the retrieved products to our product property and then sets listFilter to an empty string so that our set procedure is executed and our data is displayed.

5. The only other change is to the template:

<tr *ngFor=’let product of productsFiltered‘>

This binds to the productsFiltered property and no longer needs the pipe. We can then also bind other elements to this property or this property’s count method as needed.

Enjoy!

May 11, 2016

Angular 2: Getting Started with Visual Studio 2015 using a Web Site

My “Angular 2: Getting Started” course on Pluralsight details how to get started with Angular 2. To provide guidance that works on any platform (Windows, OS X, and Linux), the course uses Visual Studio Code as the editor. However, there are many developers that prefer to use Angular 2 with Visual Studio 2015.

The biggest challenge in providing guidance for using Angular 2 with Visual Studio 2015 is that there are too many options as outlined in this prior post. This post focuses on using Angular 2 with Visual Studio 2015 using a Web site instead of a Visual Studio project.

For this technique, we’ll cover how to set up and run the “Angular 2: Getting Started” files using the ‘Open Web Site’ feature of Visual Studio 2015.

1. Download the starter files from my GitHub repo: https://github.com/DeborahK/Angular2-GettingStarted

    If you are not familiar with using GitHub, just click on the “Download ZIP” button as shown below. Then unzip the files.

image_thumb3

2. Copy the files from the ‘APM – Start’ folder to a folder that has no spaces.

NOTE: The full path to the project.json file must have no spaces for these steps to work.

3. Open Visual Studio 2015 and select: File | Open | Web Site.

4. Select the folder created in step #2.

    This opens the Angular application as a Web site and automatically installs all of the packages.

5. Open the Output window (View | Output) to watch the npm command execute. When it is finished, you should see something like this:

image-9.png (712×368)

NOTE: There is an intentionally missing component (because we have not created it yet!). When running in VS Code, the application runs even though this component is missing. In Visual Studio 2015, the compile will fail and the application won’t run. To successfully compile the code, open main.ts and comment out the contents of this file. (Just be sure to uncomment them after we build the app.component.)

6. Open the Package Manager Console (View | Other Windows | Package Manager Console)

7. Type ‘npm start’ into the Package Manager Console.

NOTE: If there are any spaces in the path, the ‘npm start’ will not execute successfully.

This will launch your default browser and watch for changes. You can then edit any of the project files (AND SAVE!). The browser will then update automatically and reflect your changes.

NOTE: If the Package Manager Console does not appear to be in the correct directory for the ‘npm start’ command to work (it must be in the directory containing the package.json file), you can change the current path used by the Package Manager Console by typing this at the PM> prompt:

set-location -path .\APM -PassThru

This changes your current path to the APM subfolder. The -PassThur option displays the current path so you can confirm it.

By following the above steps, you can follow along with the course using Visual Studio 2015 instead of VS Code. Just be sure to follow steps 6 & 7 above each time you reopen the project to restart the script that watches for changes and refreshes the browser.

It would be great to hear from you on whether these steps worked for you. Follow me on twitter: @deborahkurata

Enjoy!

Angular 2: Getting Started with a Visual Studio 2015 TypeScript Project

My “Angular 2: Getting Started” course on Pluralsight details how to get started with Angular 2. To provide guidance that works on any platform (Windows, OS X, and Linux), the course uses Visual Studio Code as the editor. However, there are many developers that prefer to use Angular 2 with Visual Studio 2015.

The biggest challenge in providing guidance for using Angular 2 with Visual Studio 2015 is that there are too many options as outlined in this prior post. This post focuses on using Angular 2 with a Visual Studio 2015 TypeScript project.

For this technique, we’ll cover how to set up and run the “Angular 2: Getting Started” files using a TypeScript project in Visual Studio 2015.

1. Download the starter files from my GitHub repo: https://github.com/DeborahK/Angular2-GettingStarted

    If you are not familiar with using GitHub, just click on the “Download ZIP” button as shown below. Then unzip the files.

image_thumb3

2. Open Visual Studio 2015 and create a new project: File | New | Project.

3. Select the TypeScript project template and name the project “APM” for Acme Product Management.

image_thumb7

4. This creates several TypeScript sample files. Delete app.css, app.ts, and index.html.

image_thumb10

5. In file explorer, open the cloned or unzipped `APM – Start` folder if you want to start with the project starter files. Open the `APM – Final` folder if you want to work with the final files from the course.

image_thumb13

image_thumb16

6. Copy all of the files from within the folder shown above (except the .vscode folder) to the APM project file you just created with Visual Studio.

image_thumb20

7. Click the “Show All Files” button in the toolbar of Solution Explorer.

image_thumb27

8. Select to include the api and app folders and the index.html, package.json, tsconfig.json, and typings.json files into the project. If desired, click “Show All Files” again to hide the remaining files.

image_thumb33

9. Right-click on the package.json file and select: Restore Packages

image_thumb36

10. Open the Output window (View | Output) to watch Visual Studio 2015 run npm and install Angular 2 and its dependencies.

So even through we are using a Visual Studio 2015 menu option (Restore Packages), Visual Studio is running the Node Package Manager (npm) to install all of the packages defined in the package.json file.

image_thumb40

11. If npm finishes successfully, it should appear like this (see below) in the Output window.

image_thumb43

12. Right-click on index.html and select Set As Start Page.

image_thumb46

NOTE: There is an intentionally missing component (because we have not created it yet!). When running in VS Code, the application runs even though this file is missing. In Visual Studio 2015, the compile will fail and the application won’t run. To successfully compile the code, open main.ts and comment out the contents of this file. (Just be sure to uncomment them after we build the app.component.)

13. Press F5 to run and the application appears in the selected browser.

HOWEVER … you won’t be able to edit and continue. And if you edit and try to refresh the browser, you will most likely see a 404 message.

I have not yet figured out the magic required to provide edit and continue using Visual Studio 2015 directly … but you can get edit and continue if you stop debugging and run the application using a script instead of F5 following these additional steps:

14. Display the Package Manager Console (View | Other Windows | Package Manager Console).

15. Type `cd APM` in the Package Manager Console to change to the directory containing the APM project.

NOTE that if you used a different directory name for your project, type that instead. And if you have a space in the name, it will need to be enclosed in quotes: cd “APM – Start”

16. Type ‘npm start’ into the Package Manager Console.

This will launch your default browser and watch for changes. You can then edit any of the project files (AND SAVE!). The browser will then update automatically and reflect your changes.

By following the above steps, you can follow along with the course using Visual Studio 2015 instead of VS Code. Just be sure to follow steps 14-16 above each time you reopen the project to restart the script that watches for changes and refreshes the browser.

It would be great to hear from you on whether these steps worked for you. Follow me on twitter: @deborahkurata

Enjoy!

Next Page »

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