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

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:

117 Comments

1 2 3 5
  1.   Joe Ballard — April 6, 2016 @ 2:56 pm    

    The solution above did not work for me (I do not have access to our proxy URL and port). Since it was choking on the typing for es6-shim, this is what I did instead:
    1. Downloaded the es6-shim typing file from github and stored it in a folder called local_typings. I used the URL from the error message I got when I ran rpm install.
    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/7de6c3dd94feaeb21f20054b9f30d5dabc5efabd/es6-shim/es6-shim.d.ts
    2. Changed the es6-shim line in my typings.json file to point to the local copy I just saved.
    “es6-shim”: “file:local_typings/es6-shim.d.ts”,

    •   deborahk — April 14, 2016 @ 9:23 am    

      Thank you so much for posting your solution here!

  2.   Raoul — April 10, 2016 @ 7:50 am    

    Not sure if this is problem faced by anyone else yet. Looks like problem with angular polyfills though. I was able to display below
    ACME Product Management
    My First Component

    But, the moment I un-comment some code (import etc) from app.component.ts, I get error
    “system.src.js:1154 GET http://localhost:3000/angular2/Core 404 (Not Found)fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1710ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:1709(anonymous function) @ system.src.js:2734(anonymous function) @ system.src.js:3308(anonymous function) @ system.src.js:3575(anonymous function) @ system.src.js:3960(anonymous function) @ system.src.js:4419(anonymous function) @ system.src.js:4671(anonymous function) @ system.src.js:406ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434
    angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/angular2/Core(…)ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434

    app.component.ts code as below.

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

    @Component({
    selector: ‘pm-products’,
    template: `

    {{ pageTitle }}
    My First Component

    `//,
    //directives: [ProductListComponent]
    })
    export class AppComponent {
    pageTitle: string = ‘ACME Product Management’;
    }

    •   deborahk — April 14, 2016 @ 9:25 am    

      Were you ever able to resolve this?

      •   Raoul — April 14, 2016 @ 11:32 pm    

        nope, not yet. Thanks for a lucid pluralsight course on angular2.

        •   deborahk — April 29, 2016 @ 1:37 pm    

          Are you using back ticks or single quotes? The formatting on the code makes it hard to tell the difference.

          Do you have someplace (like github or plunker) that you can post your code so I can take a look?

        •   deborahk — May 9, 2016 @ 12:23 pm    

          Are you starting from the sample code provided in my github? What version of Angular are you targeting? What version of node/npm are you using?

          If I type in “node -v” I get v5.0.0. If I type in “npm -v” I get 3.8.6.

    •   Guy — May 4, 2016 @ 4:56 am    

      Im having the same issue at the same place in the course. There are a lot of errors referencing promises in the angular2-polyfills.js file. Any Progress in solving this? I am using back quotes btw.

      Could be it a version issue?

      •   deborahk — May 9, 2016 @ 12:24 pm    

        Are you starting from the sample code provided in my github? What version of Angular are you targeting? What version of node/npm are you using?

        If I type in “node -v” I get v5.0.0. If I type in “npm -v” I get 3.8.6.

        •   Justin — May 18, 2016 @ 9:52 pm    

          I’m having a similar/same issue. Everything seemed to install correctly with the packageJson. I’m using back ticks as well. I’m using node v0.12.2 and npm 3.8.8.
          I also get an error which could be related but in main.ts it is underlined AppComponent in bootstrap(AppComponent); and it webstorm says Argument type AppComponent is not assignable to parameter type Type. Hope this helps to resolve the issue. Thanks!

          •   Justin — May 18, 2016 @ 9:53 pm    

            I didn’t explain that in the console I seemed to be getting polyfill errors as well as what was mentioned above.

          •   deborahk — May 20, 2016 @ 12:16 pm    

            Hey Justin –
            Regarding the AppComponent errors … we have not built that component yet. In VSCode (as I used in the course) this runs fine with this error so I didn’t mention it or call it out. If your editor is calling out this error, you can just comment out these lines for now and uncomment them when we build the AppComponent.

        •   raj — June 13, 2016 @ 1:40 pm    

          I am having same issue at same part of course. i am using node 6.2.1 and npm 3.9.3 and i am using angular beta 15. it stays on “loading app..” screen when i look into console under devtools of browser many angular2-poly errors

          •   raj — June 13, 2016 @ 1:46 pm    

            my bad i got it thanks

          •   deborahk — June 13, 2016 @ 6:59 pm    

            Glad you figured it out. Did it involve anything I should add to this post?

          •   deborahk — June 13, 2016 @ 6:59 pm    

            Glad you figured it out. Did it involve anything I should add to this post?
            Thanks!

          •   raj — June 14, 2016 @ 7:09 am    

            No Thanks.I really love your tutorial, this is the best tutorial on Angular2 right now. I have small request, if there is chance can you please do a tutorial on TDD approach on angular application using karma, Jasmine, Protractor and gulp/grunt.

            Once again thanks a lot for this nice tutorial.

  3.   Hans — April 13, 2016 @ 2:28 am    

    Introduction to Components (slides)
    Show the Components in a tree (hierarchical: the app is at the top!)
    Thank’s for your careful crafted presentation!

    •   deborahk — April 14, 2016 @ 9:26 am    

      Thanks!

  4.   Chethan Shetty — April 25, 2016 @ 9:10 am    

    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

  5.   Dave Blowers — April 26, 2016 @ 2:24 am    

    I am getting an error running npm install on the project. Can anyone advise
    Thanks

    940 info postinstall write-file-atomic@1.1.4
    941 info install npm@3.8.7
    942 info postinstall npm@3.8.7
    943 info install product-management@1.0.0
    944 info postinstall product-management@1.0.0
    945 verbose unsafe-perm in lifecycle true
    946 info product-management@1.0.0 Failed to exec postinstall script
    947 verbose stack Error: product-management@1.0.0 postinstall: `typings install`
    947 verbose stack Exit status 1
    947 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:217:16)
    947 verbose stack at emitTwo (events.js:87:13)
    947 verbose stack at EventEmitter.emit (events.js:172:7)
    947 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
    947 verbose stack at emitTwo (events.js:87:13)
    947 verbose stack at ChildProcess.emit (events.js:172:7)
    947 verbose stack at maybeClose (internal/child_process.js:827:16)
    947 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
    948 verbose pkgid product-management@1.0.0
    949 verbose cwd K:\APMProject
    950 error Windows_NT 6.3.9600
    951 error argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “install”
    952 error node v4.4.3
    953 error npm v2.15.1
    954 error code ELIFECYCLE
    955 error product-management@1.0.0 postinstall: `typings install`
    955 error Exit status 1
    956 error Failed at the product-management@1.0.0 postinstall script ‘typings install’.

    •   Dave Blowers — April 26, 2016 @ 3:17 am    

      Sorry – fixed it with .typingsrc file. RTFM!

      •   deborahk — April 29, 2016 @ 1:38 pm    

        Glad you were able to fix the issue!

      •   Dina — June 8, 2016 @ 8:20 am    

        How did you fix it?
        I have the same problem

        •   Stephen — June 9, 2016 @ 1:04 pm    

          I ran the following command in the application folder.

          npm install typings –global

          https://www.npmjs.com/package/typings

          •   Alksey — June 17, 2016 @ 5:04 am    

            npm install typings –global

          •   Alksey — June 17, 2016 @ 5:06 am    

            ups.. “global” with two dashes

  6.   Darin Milligan — May 29, 2016 @ 11:03 am    

    Hi Deborah,

    Thanks so much for your Angular 2 Getting Started course. Its awesome.

    Just one question. The above problem “Implementing Product Detail: Undefined Product” doesn’t make a lot of sense to me. It seems to me like the ngOnInit method where data is retrieved should should return data before the view is rendered. Why is this not happening? Perhaps you can elaborate? This seems like a life cycle issue?

    Thanks!

    •   deborahk — May 31, 2016 @ 1:34 pm    

      Thank you for the kind words about the course, Darin.
      Angular allows us to display something on the screen while the data is loading. This allows us to put up a progress bar, spinner, or just some general information while the data is loading in the background. To allow that, the view needs to be rendered right away.
      Does that help?

      •   Darin Milligan — June 2, 2016 @ 2:52 pm    

        Yes, thanks. Makes sense now.

  7.   sachin — June 14, 2016 @ 9:42 am    

    Hi,

    For new routing mechanism which js file of routing is to be included in Index.html file so that we can use it.
    Like in RouteConfig, we used to use router.dev.js which was on below path : node_modules/angular2/bundles/router.dev.js

    Please reply ASAP. I am in between some important stuff.

  8.   Shiv — June 21, 2016 @ 8:43 am    

    Hi Deborah,

    I’m getting this weird error when working on the custom filter pipe. The .js file being generated isn’t being used instead this is displayed on the console:

    16.06.21 11:38:13 404 GET /app/products/product-filter.pipe.ts.js

    I can work around the error by renaming the product-filter.pipe.js file to one ending with .ts.js but I’m not sure what the problem is in the first place.

    Thanks!

  9.   Shiv — June 23, 2016 @ 12:02 pm    

    cam any one suggest how to resolve the performance issue in IE , but it’s working fine in chrome am using beta .17

    •   deborahk — June 30, 2016 @ 9:17 am    

      You may need to update to a newer version of Angular 2.

  10.   Sai — August 12, 2016 @ 9:17 pm    

    Hey Deborah, Could u please let me know if u are aware of why npm complains “Error : Cannot find module portfinder.” when I try to run my proj. ?!

    Have installed angular-cli, angular-cli@webpack, then I ran this via ng serve.

    •   deborahk — October 19, 2016 @ 9:13 am    

      My course does not use the CLI or WebPack. You may need to post your question to the CLI github repo instead

1 2 3 5

Sorry, the comment form is closed at this time.

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