How to Setup Your Angular Development Environment on Windows 10 or 7

Video: Install Angular JS 8 on Windows 10

Let’s start with this video on how to install Angular 8 on a Windows 10 PC.

I could not complete this video without some trouble shooting steps.

In my opinion, one of the best ways to learn something is by doing something difficult and having to fix errors, it just makes you better at your craft.

I recommend watching the video and follow along. If you hit one of the issues I did, use the resources below to fix your installation.

This video will get you 90% of the way there. After following this video, use the troubleshooting references & resources below to fix your Angular development environment so you can get to coding quicker. 🙂

Overview of Resources & References

Angular CLI Overview and Command Reference

Node JS Download for Windows 10

Node Installer download page w/ install options. Choose the Recommended for Most Users whatever the version.

Troubleshooting Your Angular Installation

Delete the NPM Cache

The first issue I had installing Angular 8 on Windows 10, was that Windows Powershell was not running the Angular CLI commands. I found this article on StackOverflow.com that helped me in clearing the npm cache which seemed to be the root cause. This solution worked for me!

Remove ng.ps1 from the directory C:\Users\%username%\AppData\Roaming\npm\ 
then try 
clearing the npm cache at C:\Users\%username%\AppData\Roaming\npm-cache\

Powershell Command to Set Execution Policy

Next issue I faced was Powershell execution error since the Angular CLI uses Windows Powershell commands to get things done. This article on C# Corner about setting the Powershell Execution Policy to fix Angular CLI execution issues did the trick.

set-ExecutionPolicy RemoteSigned -Scope CurrentUser 

Once I got past the two CLI execution error fixes, I was able to run the following command to build a new project. That is as far as I’m getting tonight.

Setup Your Hello World Angular App

Run the following command the command line or terminal while inside your application folder. Then you can continue on to complete the Angular Installation tutorial video.

ng new hello-world

If you’re having Angular JS installation issues on Windows 10 or Windows 7 and this article helped you then it was all worth writing it. Hope this helps somebody!

~CyberAbyss

JavaScript Error: Uncaught TypeError: Cannot read property ‘addEventListener’ – Solved!

JavaScript Event Listener Error: Cannot Read Property ‘addEventListener’

I’m working on building some JavaScript event listeners for a project.

While working on a demo based on this YouTube Video. I got an error that took me a couple of minutes to figure out.

JavaScript Event Listener Example Video

The JavaScript Code

const grandparent = document.querySelector(".grandparent")

const parent = document.querySelector(".parent")

const child = document.querySelector(".child")

 grandparent.addEventListener('click', e => {

    console.log(e)
     }) 
 

Screenshot of JavaScript Error

HTML Example w/ Error

Solution: Move JavaScript to End of File

Move script tag to load after the div elements the event listeners are on have loaded

The root cause of the error is that if we load the JavaScript file before the DOM element loads then the const reference to grandparent class fails as it has not yet been loaded in to the DOM as the web page is rendering.

By simply moving the JavaScript tag to load anytime after the div elements referenced in the JavaScript we now have now error and it runs just fine.