Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

Archive for TypeScript

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!

May 11, 2016

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!

April 4, 2016

“Angular: Getting Started” Problem Solver

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

Revision History

August 14, 2019 – This course was updated for v8 as documented here.

November 8, 2018 – This course was updated for v7 as documented here.

July 11, 2018 – This course was updated for v6 as documented here.

August 10, 2017 – This course was updated to include the Angular CLI, the new HttpClient in v4.3, and more as documented here.

October 18, 2016 – This course was updated for the final release of Angular 2.

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

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

  • APM–Start: The starter files. Use this as a starting point to code along with the course.
  • APM–Final: The completed files.

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

Data Typing Issues

Problem: Odd typing issues such as Type ‘EventEmitter’ is not generic, or similar.

VS Code has been a bit too “helpful” with adding import statements and sometimes adds an incorrect one. For example, it may add the node EventEmitter instead of the Angular EventEmitter.

Solution: If you see a data typing error, first check your import statements at the top of the file and ensure they are correct.

Images Don’t Appear

Problem: Clicking on “Show Image” does not show the image, only a box with the image name.

If you look in the browser developer tools and see an error with the images, you may be missing the images. This will happen if you don’t use the provided starter files.

Solution: You have several options here:

  • Download the images from my github repo.
  • In the products.json file, replace the URL’s for the images with URLs to other images as desired.
  • Continue on as is. You can confirm that the button works by seeing the product name appear in the image column. The image itself is not necessary for successful instruction.

No Generated Test for Module

Problem: The command:

ng g m products/product --flat -m app

Does not generate a test as shown in the course.

Solution: That is new correct behavior.

An Angular module has no code to test, so generating a test for a module did not make sense. The Angular CLI was recently changed so it does not generate a test for the module. This will be changed in the course the next time the course is updated.

npm Issues

Problem: Error when using `npm install`.

There are several possible solutions depending on the source of your problem.

Solution 1: Ensure you have a current version of npm installed. The course was tested with node v10.x and npm 6.2.0. If your version is significantly older, it may not work. Use node –v and npm –v to check your versions. To install a newer version of both tools, use this link: https://nodejs.org/en/download

Solution 2: It may be a permissions problem. Try the steps found here: https://docs.npmjs.com/getting-started/fixing-npm-permissions

Can’t See Stars

Problem: Can’t see any stars.

The stars are displayed using font-awesome, so if no stars appear, this often means that font-awesome was not installed or imported correctly or the styles for the stars are not set.

Solution: Re-watch the portion of the video detailing how to set up and import font-awesome: https://app.pluralsight.com/player?course=angular-2-getting-started-update&author=deborah-kurata&name=angular-2-getting-started-update-m4&clip=1&mode=live

At time code: 2:18. As per the video …

To install font-awesome use:

`npm install font-awesome`

Be sure you specify font-awesome (with a dash) and not fontawesome as the later is something else and won’t work.

To import font-awesome, in the style.css file:

`@import “~font-awesome/css/font-awesome.min.css”;`

Solution: Ensure the star.component.css file contains the following:

.crop {
  overflow: hidden;
}

 

Setting Up Behind a Corporate Web Proxy

Problem: Error performing `npm install`.

See these posts for more information:

NOTE: If the proxy requires authentication (which is usually true), please use this format

$ npm config set proxy http://login:pass@host:port
$ npm config set https-proxy http://login:pass@host:port

NOTE: If you do not have access to the proxy URL and port, you can install the missing typing manually following the steps posted by Joe Ballard in the comments for this post below. Note however that with Angular 2 final you need core-js and node NOT es6-shim. See the typings.json file for details.

I Don’t Want to use the Starter Files!

Problem: Some viewers prefer to build the code using the Angular CLI instead of using the starter files.

The instructions in the course were set up for viewers to use the Starter files. That way we could get going coding quickly, without having to set everything up first. I cover how to build an app from scratch using the Angular CLI in the “Building, Testing, and Deploying with the CLI” module later in the course.

Solution: If you want to build the code using the Angular CLI instead of using the starter files, you need to do the following:

1) Use the command: `ng new APM --prefix pm`

This sets the appropriate prefix for the child component we build later in the course.

2) Ensure the star.component.css file contains the following:

.crop {
    overflow: hidden;
}

3) Set up the folder for the data file used in the course:

In the angular.json file, add the api folder to the assets array:

"assets": [ 
    "src/assets", 
    "src/api", 
    "src/favicon.ico"
],

Can I Follow the Course Without Installing Node?

Problem: Some viewers can’t install node due to limitations on installation of external apps or proxy issues. In this case, it still possible to code along with the course.

Solution: Use Stackblitz! Stackblitz is a playground that allows you to work with JavaScript, TypeScript, and Angular without downloading or installing anything.

To use Stackblitz with this course, use this link: https://stackblitz.com/github/DeborahK/Angular-GettingStarted/tree/master/APM-Start

You should then be able to follow the this course using Stackblitz instead noting the following:

NOTE: If you chose to use Stackblitz, it currently does not support reading json files from a folder defined in the angular.json file. Rather, you need to copy the products folder from the api folder to the assets folder. Then modify the productUrl to look in the assets folder: private productUrl = ‘assets/products/products.json’;

NOTE: To install packages, such as bootstrap and font-awesome, you need to use the DEPENDENCIES branch in the Project hierarchy to the left of the code in Stackblitz:

  1. Open the DEPENDENCIES node. (You should see the list of existing dependencies such as @angular/common
  2. Below the list of dependencies is an input box with the text “enter package name”
  3. Enter bootstrap there and press enter.
  4. If it asks you to install missing dependencies, click “INSTALL MISSING DEPENDENCIES”
  5. Repeat step 3 with font-awesome

NOTE: Stackblitz does not seem to recognize the Font Awesome icons. So you will instead see portions of squares.

Port 4200 is Already in Use

Problem: When using npm start or ng serve you see the error: “Port 4200 is already in use”.

Solution: The Angular CLI serves the application on Port 4200. If you start up another application, it will start up on the same port and it will see that port as already in use.

There are several ways to solve this problem.

  • You can serve to a different port: ng serve -–port 4201 or similar. Or to serve and automatically open the browser: ng serve –o –-port 4201
  • You can kill the task holding on to the port:
    • On a Mac: sudo kill $(sudo lsof -t -i:4200) or sudo kill `sudo lsof -t -i:4200`
    • On a PC:
      • Open a command prompt as administrator
      • run netstat –ano | findstr :4200
      • kill the appropriate PID: taskkill /PID 10764 /F
  • You can reboot your system. This will release all of the ports.

image

Error Code 404 Resource Not Found

Problem: When attempting to load the products from the products.json file, a 404 error code is generated and the products.json file cannot be found.

Solution: You need to modify your angular.json file

In the course, I make the assumption that viewers will download the starter files for the code and “code along” from there following the same example. So I don’t mention any of the *other* steps that are required to code along “from scratch” or using other folders/files/names. (I instead cover how to build an Angular application “from scratch” and how to set up these files later in the course.)

If you are attempting to code along “from scratch”, you need to modify your angular.json file to look like this:

      "assets": [ 
        "src/assets", 
        "src/api", 
        "src/favicon.ico" 
  ],

This ensures that the Angular CLI finds the .json file in the api folder.

The Code Does Not Work in Internet Explorer (IE)

Problem: The sample application does not run, or it runs but nothing appears in the browser AND you are using Internet Explorer (IE).

Solution: You need to set up polyfills as part of your Angular application for the application to run correctly in IE.

As stated in Wikipedia: “a polyfill is code that implements a feature on web browsers that do not support the feature”

To set up polyfills, see the module entitled: “Building, Testing, and Deploying with the CLI” in the clip called: “ng new” at time code 2:51. Here is the link to that clip.

The AppRoutingModule Does Not Work

Problem: If you created an AppRoutingModule as defined in the “Revisiting AppModule” clip in the “Angular Modules” course module, the routes may stop working.

Solution: Order matters when defining routes. The AppRoutingModule must be *last* in the list of imports, after any feature modules. The details as to why are provided here: http://blogs.msmvps.com/deborahk/angular-route-ordering/

Something is Wrong and the Code Doesn’t Work

Problem: JavaScript development in general can be difficult, so often something can go wrong.

Solution: Here are some tips for when your code doesn’t work:

  • JavaScript/Angular are CASE SENSITIVE. For example: “*ngIF” and “ngif” won’t work, must be “*ngIf”. This includes names. For example “@Angular/core” won’t work, must be “@angular/core”. If you name a route “products” it must be called “products” everywhere, and not “Products”. If you name your interface “IProduct” it must be called “IProduct” and not “Iproduct”. And so on.
  • Check the developer tools and view the console. Angular errors are shown there. Sometimes a little error causes a large message in the console. Start with the first or second line of the message. That often tells you exactly what is wrong.
  • Watch for typographical errors and syntax errors in the HTML. Unlike most Web apps, Angular is *not* forgiving when it comes to errors in the HTML. A missing or incorrect closing tag could prevent the application from working.
  • Try stopping and restarting the local server with ‘npm start’ again. Sometimes, especially when working with pipes and guards, the local server needs to be restarted for the changes to be fully recognized.
  • Try using a file compare utility and checking your code against the code for the course. You can find the starter files and final files in the github repo for this course. AND you can find the code as it should be at the end of each module using the “Exercise Files” tab on the Pluralsight page for the course.
  • Take care when finding solutions on the internet. Be sure the solution is appropriate for your version of Angular. Angular changed significantly from the Angular 2 RC versions to the final Angular 2 release. So any information posted prior to Angular 2’s release in September of 2016 can lead you down the wrong path.

“Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.”

Problem: You will see the above message in the console.

Solution: This normally means that you are missing importing the FormsModule in your AppModule (or feature module).

How Do I Debug Angular?

Problem: Here was the question from a viewer: “Since the ts is compiled to js, there is a disconnect there for tracing code back to the source files…what tools do you recommend?”

Solution: TypeScript creates a map file that maps the js to your ts files. The best way to debug is to use the Chrome browser developer tools. With them you can set break points in your ts code.

See this link for more information: https://developers.google.com/web/tools/chrome-devtools/

Where Do I Go Next?

Problem: If you’ve finished the course, you may wonder where you should next on your Angular journey.

Solution: Here are some suggestions:

September 4, 2015

Use TypeScript to Prepare for Angular 2

If you are developing now in Angular 1.x with an eye toward Angular 2, the best thing you can do is to write your Angular code with TypeScript. Angular 1.x code you write in TypeScript today will look very similar to code you will write in Angular 2 tomorrow (not literally tomorrow!).

At a recent Angular conference, the members of the Angular team from Google stated that one of the best ways to code now in Angular 1.x in preparation for Angular 2 is to use TypeScript.

What is TypeScript?

image

TypeScript is an open-source programming language that is:

  • A superset of JavaScript
    • Including all of the current JavaScript syntax, plus much more.
    • Any valid JavaScript code is valid TypeScript code. And as such, TypeScript works with all existing JavaScript frameworks, including Angular.
  • TypeScript transpiles to plain JavaScript
    • So we can deploy the resulting JavaScript files for our Angular application just as we do now.
    • And the resulting files execute in any of today’s browsers on any OS.
    • Plus there is no runtime overhead of using TypeScript because all of the types evaporate and the TypeScript-only syntax is replaced … leaving only pure JavaScript.
  • TypeScript allows us to define strong types
    • Editor tooling, such as the new Visual Studio Code editor, use these types for static type checking of our code during development
    • This makes development, debugging, and refactoring easier.
    • Plus it clarifies the developer’s intent. For example, we can define that a function is meant to take in a string. Not a number, not an object, just a string.
  • And TypeScript provides class-based object-oriented programming techniques.
    • So we can optionally think of our code in terms of objects with properties and methods.
    • And the TypeScript compiler transpiles the classes into JavaScript functions.

Here is the code for an Angular controller, written using the class-based object-oriented programming techniques available in TypeScript.

AngularWTypeScript_Code

To learn more about using Angular with TypeScript, check out the Pluralsight course: “Angular with TypeScript

AngularWTypeScript

Enjoy!

August 12, 2015

Automatic Compilation in VS Code for TypeScript

Filed under: TypeScript,VS Code @ 2:19 pm
Tags: ,

By default, when you use VS Code with a TypeScript project, you need to use Ctrl+Shift+B (or Cmd+Shift+B on a mac) to build the application and transpile the TypeScript to JavaScript. But there is a way to make this process more seamless.

To set up VS Code to watch for changes and transpile automatically requires two steps:

1) Modify the tsconfig.json file for the project.

2) Run the TypeScript compiler on the folder for the project.

Let’s look at both of these steps in detail.

Modify the tsconfig.json File

The tsconfig.json file configures TypeScript for your project. In the tsconfig.json file you can define compiler options, such as the version of JavaScript you’d like the transpiler to use. The TypeScript code is then transpiled to the selected version of TypeScript.

To configure VS Code for automatic compilation, you need to add a watch property here:

{
    “compilerOptions”: {
        “target”: “ES5”,
       “watch”: true
    }
}

NOTE: The intellisense does not seem to know about the “watch” option. So you won’t see it in the list of available compiler options. But it does work.

Run the TypeScript Compiler

You can manually run the TypeScript compiler from within VS Code by using Ctrl+Shift+B (or Cmd+Shift+B). Alternatively, you can manually run the TypeScript compiler from the command window (also called a terminal).

1) Right-click on the index.html file in the VS Code Explore pane and select Open in Console.

This opens a command window defaulted to the current project directory.

2) Type tsc.

Typing tsc (for TypeScript compiler) immediately transpiles all of the TypeScript code in the directory (and subdirectories) to JavaScript. Without the “watch” setting, if you later make changes to the TypeScript code, you have to re-run the tsc command to transpile the changes.

image

HOWEVER, if you have the watch compiler option set to true as shown in the code example above, running tsc here produces a different result. In this case, the TypeScript compiler will immediately transpile all of the TypeScript code in the directory (and subdirectories). But then, it will start watching for changes. Any change it sees to the files in the directory will automatically be transpiled. Notice in the screen shot below that it watched me make 3 changes and compiled after each of them.

image

If you leverage VS Code’s AutoSave feature, and turn on the watch following the two steps detailed above, then the TypeScript compiler will transpile your TypeScript files every time you make a change.

Enjoy!

For more information on other techniques when building an Angular application with TypeScript, check out my Pluralsight course: “Angular with TypeScript”

Thanks to Greg who posted this suggestion to the Discussion forum for my Pluralsight course.

Angular Custom Services in TypeScript: Factory vs Service

Filed under: AngularJS,TypeScript @ 1:14 pm
Tags: , , ,

In my prior post (http://bit.ly/DeborahK_AngularServices) I outlined the difference between the factory pattern and service pattern when building a custom Angular service with JavaScript. In this post we’ll look at the differences when the Angular custom service is written in TypeScript.

Angular Custom Service

The basic code to create an Angular custom service in TypeScript is the same for both the factor pattern and the service pattern.

Here is an example of a simple custom service written in TypeScript, missing only the Angular module registration:

module app.common {
    export interface IHelloService {
        sayHello(text: string): string;
        sayGoodbye(text: string): string
    }

    export class HelloService implements IHelloService {
        sayHello(text: string): string {
            return “Hello ” + text;
        };
        sayGoodbye(text: string): string {
            return “Goodbye ” + text;
        };
    }
    <Module Registration Here>
}

This code begins with a TypeScript module. The TypeScript module encapsulates the code within an Immediately Invoked Function Expression (IIFE) and provides a clean namespace for the service.

The interface defines the intent of the service. The service intends to provide a sayHello method and a sayGoodbye method. Both take in a string parameter and return a string.

The service class is exported so that it can be used from any other Angular code, such as an Angular controller. The class implements the defined interface, thereby committing to implement every property and method defined in that interface. In our case, it is committing to implement the two methods.

The primary difference between the factory pattern and service pattern when building an Angular service with TypeScript is the module registration. Let’s take a look at how that registration is different.

Service Pattern

When using the service pattern, the TypeScript code to register the service with an Angular module is straightforward.

Simply call the service method:

angular
        .module(“helloWorld”)
        .service(“helloService”,
                         HelloService);

Insert the above code into the service example in place of <Module Registration Here> and you have a working service using the service pattern.

Factory Pattern

Using the factory pattern, the registration code is a little more complex.

As shown in the prior post (http://bit.ly/DeborahK_AngularServices), an Angular factory returns an object. When building the service with a TypeScript class, a class itself cannot return an object. Properties and methods of the class can return an object, but the class itself cannot.

So when using the factory pattern with TypeScript, the trick is to define a function that creates an instance of the service and returns an object. The code for that looks like this:

function factory(): HelloService {
    return new HelloService();
}

angular
    .module(“helloWorld”)
    .factory(“helloService”,
                     factory);

Insert the above code into the service example in place of <Module Registration Here> and you have a working service using the factory pattern.

Enjoy!

For more information on this and many other techniques when building an Angular application with TypeScript, check out my Pluralsight course: “Angular with TypeScript”

AngularWTypeScript2

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