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/

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

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.

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:

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

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:

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.

– 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.

The “Angular Routing” course provides the information you need to leverage more sophisticated routing features to support more real-world routing scenarios: pass data to routes, preload data for your views, group your routes, guard your routes, add styling and animation, and even improve performance by asynchronously loading your routes.