Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

October 17, 2016

“Angular: Reactive Forms” Problem Solver

This blog post supports the sample code for the “Angular: 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!

Angular 2: Getting Started with a Visual Studio 2015 ASP.NET 4.x 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 ASP.NET 4.x project.

NOTE: If you don’t want to follow all of these steps, you can download the “Angular 2: Getting Started” starter files for an ASP.NET 4.x project in Visual Studio 2015 here: https://github.com/DeborahK/Angular2-GettingStarted and use the “APM – Start VS 2015 ASP 4x” folder. The only step required below is then Step #2, downloading and installing the latest TypeScript tools for Visual Studio 2015. When you first open the provided solution, the packages will install/update automatically.

To manually set up and run the “Angular 2: Getting Started” files using a ASP.NET 4.x project in Visual Studio 2015, follow these steps:

1. Download the Angular 2 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

2. Open Visual Studio 2015 and download the latest set of TypeScript tools for Visual Studio. Open Tools | Extensions and Updates and search for TypeScript. Select the latest TypeScript version (1.8.4 shown below). Then install the downloaded package.

image

3. Create a new project: File | New | Project, select the ASP.NET project template and name the project “APM” for Acme Product Management.

image

4. Select the desired ASP.NET 4.x template. I selected the empty template with no MVC, no authentication and no hosting.

image

5. Copy the files from the APM – Start folder that was downloaded from my GitHub repo (see Step #1) to the APM folder containing the APM.csproj folder.

image

6. Select the Show All Files button in Solution Explorer to show all of the files.

image

7. Right-click on each folder/file to be included in the project (as shown below) and select ‘Included in Project’.

NOTE: You may see a dialog that asks if you want to search for TypeScript Typings. Select ‘No’.

image

8. Right-click on packages.json and select ‘Restore Packages’. This uses npm to install all of the packages defined in the package.json file. (Similar to typing ‘npm install’ at a command line prompt.)

image

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

image

NOTE: If you are using Angular 2 RC or higher and see errors here, such as: “‘angular/compiler’ is not in the npm registry”, your Visual Studio 2015 is most likely using an older version of npm. To correct this. Use Tools | Options | Projects and Solutions | External Web Tools and move the $(PATH) entry above the $(DevEnvDir) entries as shown below.

image

10. Refreshing Solution Explorer, you should then see a node_modules and typings folders as hidden folders for the project.

image

11. There is one additional option in the tsconfig.json file that is not required when using VS Code or some of the other editors, but is required if using Visual Studio 2015. Add this line to the tsconfig.json file: “compileOnSave” = true and SAVE.

image

You may have better results at this point if you exit Visual Studio 2015 and reopen it.

12. Click the Run button or press F5 to run the application.

This will launch your default browser and run the application. You can then edit any of the project files (AND SAVE!). Then refresh the browser to see your changes. NOTE: The refresh only works when there is no routing path in the address bar.

13. If you see errors on compilation such as “Property ‘map’ does not exist on type ‘Observable<Response>’” or “Observable cannot be found”, then exit Visual Studio and follow the instructions here: https://github.com/Microsoft/TypeScript/issues/8518

This involves replacing your C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js file. NOTE: This requires admin privileges.

By following the above steps, you can follow along with the course using Visual Studio 2015 instead of VS Code.

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

Enjoy!

April 28, 2016

Angular 2: Getting Started With Visual Studio 2015

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.

  • Do we use TypeScript? If so, do we use a TypeScript project in Visual Studio 2015?
  • Do we use a simple “Web Site”?
  • Do we use ASP.NET? If so, ASP.NET version 4.6 (current version) or ASP.NET Core 1.0 (previously known as ASP.NET version 5.0 and currently in beta)
  • Do we use MVC? If so, MVC 5 (current version) or MVC 6 (currently in beta)?
  • Do we use more JavaScript-ish tools such as npm? Or try to do everything with Visual Studio tools?
  • Do we use the command line? Or try to do everything within the Visual Studio 2015 IDE?
  • And so on …

The plan is to cover several of these options, starting with the most basic steps required to use Visual Studio 2015 with Angular 2.

Here are the links to the options covered so far:

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 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 >= 2.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!

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 v6.5.0 and npm 3.10.6. 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/current/

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

Setting Up Behind a Corporate Web Proxy

Problem: Error in installing typings when performing `npm install`. Error may be something like “Failed at the product-management@1.0.0 postinstall: ‘typings install’

Solution 1: npm may not be using your globally defined proxy setting. Try adding a .typingsrc file with the value: “proxy=http://myproxy.com:myport”

Solution 2: Try manually installing the typings by running the following command at the command prompt: `npm run typings install`

Solution 3: Try the updated version of the starter files: APM-Start-Updated. Later versions of Angular 2 changed how the types are accessed and using these newer versions often prevent some of the typings issues.

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.

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 Plunker! Plunker is a playground that allows you to work with JavaScript, TypeScript, and Angular without downloading or installing anything.

To use Plunker:

1) Access the Web site: https://plnkr.co/

2) Select “Launch the Editor” (big blue button in the upper left).

3) Drop down the list from the New button (big green button in the toolbar) and select Angular. (A box appears telling you that you have unsaved changes. Just click Yes to proceed)

This sets up everything you need to run Angular here instead of downloading node/npm and running it on your system.

Just use the New File link in the Files list on the left to add new files. To specify a subdirectory, just add the path to the file name when creating a new file. For example: “src/app/products/product-list.component.ts”

You should then be able to follow the this course using Plunker instead.

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 closed the editor without stopping the service, it may still be holding on to port. So when you try to run again, it sees 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-cli.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-cli.json file to look like this:

  "apps": [ 
    { 
      "root": "src", 
      "outDir": "dist", 
      "assets": [ 
        "assets", 
        "api", 
        "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/

Can We Use SCSS Instead of CSS?

Problem: If you are using another style sheet tools, you may be wondering how to use them with Angular.

Solution: Here are some suggestions:

– If you use @angular/cli (like is used in this course) then you can use the info here: https://github.com/angular/angular-cli#css-preprocessor-integration

– If you use WebPack (but not the CLI), there is info here: https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components and here: http://stackoverflow.com/questions/38313971/how-to-use-sass-for-components-style-in-angular-2

– If you want to use systemjs as is, then you can add a build step to your process that builds the css from the scss and then use the css in the component.

– If you want to use a loader with systemjs and then reference the scss instead of the css in the component, check out this: https://github.com/mobilexag/plugin-sass PLEASE NOTE: See the warning it provides on using this with TypeScript.

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:

Why Angular? Why Angular 2?

Filed under: Angular,JavaScript @ 10:52 am
Tags: , , ,

Why Angular and not some other JavaScript framework? (And there are lots of JavaScript frameworks out there!)

image

· Angular makes our HTML more expressive. It powers up our HTML with features such as if conditions, for loops and local variables.

· Angular has powerful data binding. We can easily display fields from our data model, track changes, and process updates from the user.

· Angular promotes modularity by design. Our applications become a set of building blocks, making it easier to create and reuse content.

· And Angular has built-in support for communication with a back-end service. This makes it easy for our Web applications to integrate with a backend service to get and post data or execute server-side business logic.

No wonder Angular is so very popular with Web developers!

With so many developers already using Angular 1, why do we need an Angular 2?

image

· Angular 2 is built for speed. It has faster initial loads, faster change detection and improved rendering times.

· Angular 2 is modern. It takes advantage of features provided in the latest JavaScript standards and beyond such as classes, modules, and decorators. And it leverages Web Component technologies for building reusable user interface widgets. Yet it supports both green field and legacy browsers: Edge, Chrome, Firefox and Internet Explorer back to IE 9!

· Angular 2 has a simplified API. It has fewer built-in directives to learn, simpler binding, and a lower overall concept count.

· And Angular 2 enhances our productivity to improve our day-to-day workflow by providing a consistent pattern for writing our code.

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

« Previous PageNext Page »

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