Solution: Angular `ng new` command stuck at ‘Installing packages for tooling via npm’

So I am learning Angular 2 and decided to use Angular CLI this time instead of those seed projects.

BTW, I am following this course to study basics of Angular.

sudo ng new angular-app

And this is what happened

Password:
As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
which will only support Node 6.9 and greater. This package will be officially deprecated
shortly after.

To disable this warning use “ng set –global warnings.packageDeprecation=false”.

installing ng2
create .editorconfig
create README.md
create src/app/app.component.css
create src/app/app.component.html
...
...
...
create karma.conf.js
create package.json
create protractor.conf.js
create tslint.json
Directory is already under version control. Skipping initialization of git.
Installing packages for tooling via npm.

It was stuck at the

Installing packages for tooling via npm

for ages and since I didn’t want to give up using the CLI, here is how I solved it.

$ ng new angular-app --skip-npm

As it was stuck on npm packages install process and using –verbose with the command didn’t help, I used above command to skip installing npm packages and did it manually.

So after above, I used

$ cd angular-app

to get into the directory and then installed npm via

$ npm install

that install script takes care if everything else that CLI does if it all works normally.

Now, since we are using the CLI, here is how to compile and run it

$ ng serve

and it should show something like following when it all works nicely.

** NG Live Development Server is running on http://localhost:4200. **
Hash: a1114768f326f4da3abe
Time: 9472ms
chunk {0} polyfills.bundle.js, polyfills.bundle.map (polyfills) 147 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.map (main) 3.98 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.map (styles) 10 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.62 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

Heading into the browser, it looked like this

Problem solved!

Copy Javascript object or any variable from console into clipboard

While I was doing some debugging, I badly needed to compare two Javascript objects that I could easily print into console but then was having a hard time remembering all of the differences from one object to the other one. This was a major API change and I couldn’t just get everything off my memory. So I just needed a quick way of copying the JS object into clipboard. With chrome dev tools, I printed both the objects to console with console.log and then used Sublime comparison tool to compare them both and easily note the differences when I needed to.

Problem solved!

Here is how I did that.

 

Chrome Dev Tools – Save console log object into global variable

Right click on the variable or object and then click on “Store as Global Variable”. Since I had two variables that I needed to compare. I saved them both in the same manner.

 

Chrome Dev Tools – Objects after being saved as Global Variables

Now for the final step, I used

[[code]]czoxMjpcImNvcHkodGVtcDEpIFwiO3tbJiomXX0=[[/code]]

and
[[code]]czoxMjpcImNvcHkodGVtcDIpIFwiO3tbJiomXX0=[[/code]]

to get the variables stored in the clipboard and then subsequently coped them into different files to compare. You can use any file comparison tool for the visual difference which helps with quickly noticing what changed and modify whatever code changes are need for new object in the application. In my case, I used, “Compare Side-By-Side” package for Sublime Text. As you can see, I can quickly able to see the differences between the properties of object as we changed the API from V1 to V2.

Side-by-side file comparison & difference tool for ST2/3

Part 01 – Lets start with react – Hello world

Skip to real stuff. 

My mom always says, just do it! Or was it Nike? Anyhow, I plan on actually just doing it. Like this guy!

So I am going to challenge myself everyday. It’s 6:35 AM in the morning and I have been up all night. I just want to reinvent myself in the best possible may. May be I just need some new learning. My day job involves Angular 1 so I am kinda bored and want to learn new skills. So here we go:

I am starting with installing and getting a basic “Hello World” app with react. The idea is to spend 30 minutes everyday and share my experiences with you.

All you need to know for this is a little bit about node and what is npm. That’s all. Then simply go into the terminal and type as follows


npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Now after that, you should have a working app which you can open in your browser and have fun looking at it. I’d post more tomorrow. Stay tuned.

Note: This is my personal journey with the react learning and I’d keep posting everyday.

|