Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

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

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

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, the site providing the images (openclipart.org) may be down.

Solution: You have several options here:

  • Try again later when the open clip art site we use is back up.
  • 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 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

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.

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”;`

 ‘Cannot read property ‘config’ of null’ on ‘npm start’

Problem: When typing ‘npm start’, receive the error: ‘Cannot read property ‘config’ of null’.

This almost always means that you are missing the .angular-cli.json file. If you are using a Mac, this is often because the Mac sees files that begin with “.” (dot) as system files and hides them or won’t copy them if copying a folder.

Solution: Go back to the original repository and manually copy the .angular-cli.json file into your root (APM) folder. You may need to perform a Command Shift . to show the hidden files.

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.

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) Set up bootstrap:

1. Run npm install bootstrap –save
2. In the .angular-cli.config file, add the Bootstrap CSS to the styles array:

"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.css"
],

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

In the .angular-cli.config file, add the api folder to the assets array:

"assets": [ 
    "assets", 
    "api", 
    "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 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:

117 Comments

  1.   Supun Wimukthi — January 30, 2017 @ 12:01 am    Reply

    Hello Debora,

    When I try to add ‘product-list.component’ to the ‘app.component’ as a directive, it will show a red line under ‘directives’ property. This is the code.

    import { Component } from ‘@angular/core’;
    import {ProductListComponent} from ‘./products/product-list.component’;

    @Component({
    selector: ‘pm-app’,
    template: `
    {{pageTitle}}

    `,
    directives: [ProductListComponent]
    })
    export class AppComponent {

    pageTitle: string = ‘Acme Product Management’;
    }

  2.   Leif Frederiksen — January 31, 2017 @ 11:22 pm    Reply

    Hi Deborah,

    Thank you for a great course – so much detail presented in a very comprehensible way!

    Small issue when moving on: I wanted to top navigation menu to be responsive and compress to a bruger menu on small screens. I followed the pattern here: http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=static-navbar

    The principle is, that a button controls the collapse/expand of the menu items when on smaller screens.

    My problem is, that nothing happens when I click the button. Does Angular somehow take over the click so it is not intercepted by the bootstrap framework?

    Regards
    Leif

    •   deborahk — February 20, 2017 @ 10:37 am    Reply

      NOTE: I don’t get notification when posting to my blog. For a more immediate response from me, post to the discussion tab for the course here: https://app.pluralsight.com/library/courses/angular-2-getting-started-update/discussion

    •   deborahk — February 20, 2017 @ 10:40 am    Reply

      Thank you for the kind words about the course.

      Those features of bootstrap require JQuery. I don’t install JQuery as part of my sample application. You will need to include it in order to make the collapse/expand work. Please see “Twitter Bootstrap Does Not Work Properly” above.

  3.   Dung Tran — February 1, 2017 @ 7:56 pm    Reply

    Hi Deborah, following your course Angular 2: Getting Started on Pluralsight, I got this issue when I tried to run the sample application with npm start (in Chapter 3: First Things First, Running an Angular 2 application).

    It said ‘lite-server’ is not recognized as an internal command

    https://goo.gl/7IhShu

    https://goo.gl/YmIhO2

    Could you have a look and let me know what can be the cause?

    Thanks & Regards,
    Dung Tran

    •   deborahk — March 27, 2017 @ 1:31 pm    Reply

      Sorry for the late response. Were you able to resolve this issue?

  4.   onur — February 3, 2017 @ 6:58 am    Reply

    I got problems with typings install when npm install and “tsc && concurrently” when npm start. None of the solutions worked. I got discouraged. I lost too much time. I am discontinuing this tutorial. Disappointed.

  5.   Leif Frederiksen — February 7, 2017 @ 12:04 am    Reply

    Hi again Deborah,

    I experience a slight problem that I hope you can shed some light on.
    When I run the application and go to products and product/ by using the menu and then clicking on a product, everything works fine.
    But – if I put in the product/ directly in the browser URL myself, or just click refresh when on the product detail page, I get an error like this:

    zone.js:1382 GET http://localhost:3000/product/app/main.js 404 (Not Found)
    scheduleTask @ zone.js:1382

    ZoneDelegate.invoke @ zone.js:232
    Zone.run @ zone.js:114
    (anonymous) @ zone.js:502
    ZoneDelegate.invokeTask @ zone.js:265
    Zone.runTask @ zone.js:154
    drainMicroTaskQueue @ zone.js:401
    1:27 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/product/app/main.js
    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29)
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33)
    Error loading http://localhost:3000/product/app/main.js

    The system has to do with where the mail.js file is located. Obviously it is located in the “root” of the app, but it seems like it is expected to be under product (which isn’t even a folder in this app, since we only have “folders” (with an s in the end).

    In index.html I have this line:

    The reason for this is, that I want to be able to put the application somewhere on the webserver that I do not know in advance, so the app should look for files relative to the root of the app where ever it is placed.

    Can you give me some pointers?

    Regards
    Leif

  6.   sam — February 7, 2017 @ 11:20 am    Reply

    hi Deborah,
    when i try to register provider into AppCpmponent i got error “EXCEPTION: Error in ./AppComponent class AppComponent – inline template:2:6 caused by: No provider for ProductService!”

    import { Component } from ‘@angular/core’;
    import { ProductService } from ‘./products/product.service’;
    @Component({
    selector: ‘pm-app’,
    template: `
    {{pageTitle}}

    `
    ,
    providers: [ProductService]
    })

    export class AppComponent {
    pageTitle: string = ‘ACME Product Mangement’;
    }

    note: when i moved ‘providers: [ProductService]’ to ProductComponent everything work, any idea what i’m missing to have it on component level?
    best regards,
    sam

    •   deborahk — March 27, 2017 @ 1:40 pm    Reply

      Did you resolve this issue? It *should* have worked in AppComponent.

  7.   John Wenzel — February 8, 2017 @ 9:35 am    Reply

    Deborah;

    I have really benefited from this class, so far, and all the other Pluralsight courses you have taught, hats off to your presentation skills,
    but
    I am currently on the section Navigation and Routing Additional techniques
    and
    can’t get the detail page to display the pageTitle as Product Detail
    product-detail.component.ts as

    import { Component, OnInit } from ‘@angular/core’;
    import { Router, ActivatedRoute } from ‘@angular/router’;
    import { IProduct } from ‘./product’;

    @Component({
    templateUrl: ‘app/products/product-detail.component.html’
    })

    export class ProductDetailComponent
    implements OnInit {
    pageTitle: string = ‘Product Detail’;
    product: IProduct;
    errorMessage: string;

    constructor(private _route: ActivatedRoute) {

    }

    ngOnInit(): void {
    let id = +this._route.snapshot.params[‘id’];
    this.pageTitle += `: ${id}`;
    // this.pageTitle = ‘Hello’;
    }
    }

    product-detail.component.html
    as

    {{pageTile}}

    any ideas?
    Thanks

  8.   John Wenzel — February 8, 2017 @ 9:37 am    Reply

    {{pageTile}}

  9.   Sergiy Dagayev — February 8, 2017 @ 11:18 am    Reply

    Hi Deborah,

    I had a problem to install your “APM – Start” project with Typescript 2.1.5 installed in VS Code.
    The “typings install” doesn’t work.
    I have fixed it by removing one line from package.json file:

    “postinstall”: “typings install”

    and adding one line to tsconfig.json file:
    {
    “compilerOptions”: {
    “target”: “es5”,
    “lib”: [“dom”, “es6”], <————- add this line
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
    }
    }

    Hope it can help other developers.

    Regards,
    Sergiy Dagayev.

    •   deborahk — March 27, 2017 @ 1:41 pm    Reply

      Thanks for posting this!

  10.   Craig — February 22, 2017 @ 7:24 pm    Reply

    In the clip Revisiting AppModule in the App Modules section, I followed the instructions to make the product-routing.module, but the product list page does not work now. Any suggestions?

    import { NgModule } from ‘@angular/core’;
    import { RouterModule } from ‘@angular/router’;

    import { ProductListComponent } from ‘./product-list.component’;
    import { ProductDetailComponent } from ‘./product-detail.component’;
    import { ProductDetailGuard } from ‘./product-guard.service’;

    @NgModule({
    imports: [
    RouterModule.forChild([
    { path: ‘products’, component: ProductListComponent },
    {
    path: ‘product/:id’,
    canActivate: [ ProductDetailGuard ],
    component: ProductDetailComponent
    }
    ])
    ],
    exports: [ RouterModule ]
    })
    export class ProductRoutingModule { }

RSS feed for comments on this post. TrackBack URI

Leave a comment

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