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

Trouble with the Video: Install Angular JS 8 on Windows 10

Before I show you the How to Set up your Angular JS 8 Development video, let me say first that I could not complete this video without some trouble shooting and configuration steps not covered in the video.

I liked the video but hated that I had issues with it so I’ve decide to show the video then include my troubleshooting steps so you can fix any issues you’re having.

I suspect these fixes might be required for most people on initial installation. The person in the video may have done these steps a few times in making the video or in preparation for it and forgot to include these prerequisite steps in his final tutorial.

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

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

Video: Install Angular 8 – Setup Development Environment on Windows

Troubleshooting Resources & References

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.

I encountered this error, JavaScript Event Listener Error: Cannot Read Property ‘addEventListener’, while working through this video on creating JavaScript Event Listeners.

If you follow this video and have issues getting your JavaScript Event Listener to work then read on to my solution below to see how I fix my below.

JavaScript Event Listener Example Video

The JavaScript Code to Add an EventListener

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

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

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

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

    console.log(e)
     }) 
 

JavaScript Uncaught TypeError: Cannot read property ‘addEventListener’ of

Solution: Move JavaScript to End of File

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 the end of the web page, it now loads after the div tag elements in the DOM so they can be referenced in the JavaScript and available in memory.

I hope this makes sense and that it helps somebody! 🙂

~Cyber Abyss