Angular 2 Routing Resolve with Promises and Observables Reply

In Angular 1 I would frequently use the “resolve” property of routes in order to pre-load data for the route’s controller.  This was accomplished with a Promise that would prevent the route from loading until the Promise was resolved.  In Angular 2 this concept still exists, although now you can leverage Observables as well.

In my research I found plenty of examples on how to use Observables in your route’s resolve property, but almost no examples of Promises.  Since I was more familiar and comfortable with Promises at the time, I wanted to use a Promise to fetch the necessary data for my route.  I had to more or less piece together how to use a Promise to resolve a route, and then once that was done I was of course curious how it would differ had I opted to use an Observable instead.

I pieces together this Plunkr to compare side-by-side using Promises and Observables for a route’s resolve.  This example lets you switch between two different routes that resolve some mock data using either a Promise or an Observable, while outputting some logging information to the console (so make sure you have your console window open).

I hope the code is simple enough that anyone with basic knowledge of Angular 2 and Routing could follow along, but I’ll touch on the more interesting aspects of the example.  First, the resolver classes:

@Injectable()
export class ObservableResolver implements Resolve<string> {
  constructor() { }
  resolve(route:ActivatedRouteSnapshot, state:RouterStateSnapshot): Observable<string> {
    console.log("Resolving Observable...");
    let mockData:string = "";
    return new Observable(observer => {
      setTimeout(() => {
        console.log("Resolved Observable");
        mockData = "Mock Data String (O)";
        observer.next(mockData);
        console.log("Emitted new Observable data");
        setTimeout(() => {
          console.log("Completing Observable");
          observer.complete();
        }, 1000);
      }, 2000);
    });
  }
}

@Injectable()
export class PromiseResolver implements Resolve<string> {
  constructor() { }
  resolve(route:ActivatedRouteSnapshot, state:RouterStateSnapshot): Promise<string> {
    console.log("Resolving Promise...");
    let mockData:string = "";
    return new Promise<string>(resolve => setTimeout(resolve, 2000)).then(() => {
      console.log("Resolved Promise");
      mockData = "Mock Data String (P)";
      return mockData;
    });
  }
}

The PromiseResolver is pretty standard for anyone who’s familiar with Promises.  What’s interesting to note is that despite the fact that the class returns a Promise, you still access this data through an Observable.  I’m not 100% sure about this, but is seems that when you define a resolve object, the property names used for each resolve get “injected” into the data object of the ActivatedRoute as an Observable.  This is why the ResolveWithPromise and ResolveWithObservable components access the mock data the same way, even though the resolve types are different.

Tangent aside, the PromiseResolver isn’t that interesting for anyone who’s been using Promises for any amount of time.  It’s the ObservableResolver that’s using the new and shiny functionality.  The resolve() function of the class returns a new Observable object that waits for 2 seconds before updating the mock data.  However if that was all the Observable did, the route would never resolve!  Since an Observable can actually trigger its “data update” callback as many times as it wants (as opposed to a Promise which can only trigger is resolve callback once), the route is actually waiting for the “Complete” event from the Observable before allowing the route to load.

In my opinion, based on what I’ve learned so far, Promises seem to be “cleaner” for route resolution since the route isn’t actually going to subscribe and keep “listening” to any Observables.  In a basic sense, Promises are a one-and-done Observable, or to put it another way Observables can be thought of as a Promise that can repeatedly fire its resolve callback.  Route resolves don’t care about data updates – they want the necessary data and then to continue loading the route.  Promises seem to fit that design better but it’s nice to know that Observables work as well (since in many of our Angular 2 applications we’re using Observables for data fetch calls).

It’s not anything really new or groundbreaking, but I didn’t really understand how Observables interacted with a route’s resolve property prior to this.  Plus, having come from a world a Promises I really wanted a good way to compare the two methods in the same context.  Hopefully this example helps clear things up for others as well.

New MS Certification Paths Reply

Duane OdumI was in requirements gathering meetings all day, so this evening I was doing some “actual work” when a I received an email congratulating me on my Microsoft certification.  Being that I haven’t taken an exam in a few months I was a little perplexed.  Not that I mind getting more certifications but I generally like to actually know about it beforehand.

More…

MinRole Enhancements Announced at Microsoft Ignite Reply

Duane OdumSome great news for the guys and gals managing small scale SharePoint 2016 Farms – MinRole installation just got a lot more feasible.

When MinRole was originally announced, I looked at it as a great justification to make the move to SharePoint 2016. Imagine, no longer needing to take down production SharePoint environments in order to apply patches… Sign me up!

Unfortunately, when the requirements came out for the MinRole setup, many organizations could not justify setting up 8 servers to create a High Availability SharePoint Farm.  

Microsoft responded to customer feedback today at Ignite in a big way with the announcement that Feature Pack 1 for SharePoint 2016 (available in November) will include an option for creating a High Availability SharePoint 2016 Farm with just 4 servers.  By combining the Web Front End and Distributed Cache roles as well as the Application and Search roles Microsoft is really opening the door for small/mid organizations to treat their SharePoint 2016 environments as “first class citizens”. 

I am truly excited by this announcement.  As a consultant I often times find myself struggling to keep the customer happy with the overall cost of a system while still following best practices. This enhancement not only makes small to mid-size SharePoint 2016 Farm Administrators lives easier, it makes mine a bit easier too. 

For a full listing of details on Feature Pack 1 please reference the Office blog Announcing Feature Pack 1 for SharePoint Server 2016—cloud-born and future-proof

Using ngModel in Angular2 Reply

Rick HerrmannAngular 2 was finally released last week.  I was able to spend some time getting familiar with the new Framework since RC4 and was working on several small projects to help with learning.  As I continue to get a more in-depth understanding of Angular 2 I’ll be blogging on interesting things that are new and/or different from Angular 1.  The first thing I’d like to go over is Angular 2 forms – specifically the use of ngModel.

There are three ways to use ngModel in Angular 2:

  1. With 2-way binding (similar to Angular 1)
  2. With 1-way binding
  3. With no direct binding to a model

More…

Angular 2 TemplateRef Usage Reply

Mike BerrymanAngular 2 is the hot new thing, but like any other new technology out there, documentation and examples are really sparse and there’s a lot of head scratching trying to figure out why things that seem like they should work…aren’t.

I spent some time recently working with TemplateRefs in Angular 2, trying to access templates defined via a <template> tag in my HTML from the component code.

More…

Angular 2 Component Injection (From the Desk of an Angular 2 Noob) Reply

Mike BerrymanAngular 2 officially released last week – 9/14/16 – which was excellent timing for me as I had just been put on a new project that would be utilizing Angular 2 (at the client’s request).  After spending a few days familiarizing myself with Angular 2 I dived right into the project.

As an aside, and to jump on the bandwagon… why is this called Angular 2?!  I had to forget more or less everything I learned in Angular 1 when transitioning to Angular 2.  It might as well have been called Componentular or something for how much Angular 2 has in common with Angular 1.

More…

Working With git – History Manipulation Reply

Rick HerrmannOne of the most powerful features of git is that it gives you the ability to alter the commit history of your repository. This way I can have the best of both worlds by committing often during feature development, but then being able to consolidate all of the commits into a single “unit of work” when the feature is complete.  In the case where no new commits have been made to the master branch, the feature branch can be combined into a single commit with:


git checkout master

git merge feature-branch --squash

More…

SharePoint Online Changes Are Coming… Reply

Duane OdumOn August 31, 2016 Microsoft announced the newest capabilities coming to a SharePoint Online tenant near you…Modern Team Sites and Pages being of the most interest to yours truly.  So far Microsoft has done a really nice job of sticking to the roll out schedule announced at the May 4th event and that bodes well for the continued development of SharePoint moving forward.  Rather than rattle off all the improvements coming out I will just be linking to the announcement from Microsoft here and answering an open question posed by Wictor Wilen on Twitter (@wictor if you would like to give him a follow).  How do you think the new 25TB site collection limit will affect your SharePoint Designs and Architectures?

More…

First Impressions: Development for SharePoint Framework Reply

Mike BerrymanYesterday I attended a Microsoft Webinar introducting the new SharePoint Framework, and here are my first impressions:

For a few years now Microsoft has been encouraging developers to customize SharePoint with client-side technologies (Javascript, HTML5) instead of server-side (C#).  The new SharePoint Framework is another step in that direction.  Currently we 3 general options for customizing SharePoint.

  • Server-side code (not available in SharePoint Online)
  • Apps/Add-Ins
  • Directly customize/modify pages with SharePoint Designer

More…