Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 905 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



WebStorm - Setting Up Angular 2

1:52 Angular 2 lesson by

WebStorm can easily help you set up a new Angular 2 project with never even touching a terminal. This lesson shows you all the neat GUI tricks you need to know to get up and running.


egghead.io comment guidelines

Avatar
egghead.io

WebStorm can easily help you set up a new Angular 2 project with never even touching a terminal. This lesson shows you all the neat GUI tricks you need to know to get up and running.

Avatar
Víctor Adrián

I have Node installed through nvm, but after cloning the repo and trying to run the npm install through WebStorm (I needed to select and interpreter from a list since the IDE couldn't find one), I always get this:

/home/xuser/.nvm/versions/node/v6.0.0/bin/npm install
/usr/bin/env: «node»: File or directory not found

Any pointers on what could I do to fix it?

Avatar
Fabricio

Hey Victor, I use nvm too. Do you set up the correct node version in:

"Settings > Languages & Frameworks > Node.js & NPM"?

I had similar issues and they went away after I tinkered a little with the interpreter's version.

In reply to Víctor Adrián

Head over to GitHub at angular/angular2-seed. Grab this link right here. I'll copy it to the clip board.

When you open up WebStorm, you can go to check out version control, choose Git. Go ahead and paste the link in here. Name it whatever. Clone it. Then, choose to open the directory.

Then, in this directory, right-click on the package.json. Say run npm install. This assumes you have node installed already. I'm not going to add any of these files to Git, so I'll click OK. The npm install might take a while. Just wait for it.

Then, WebStorm will begin indexing everything over here. Wait for that to finish. Then, right-click on package.json again. Go to Show NPM Scripts. Double-click on Start.

Then, it will start loading up for you. If you're going to use this, come in here and break it out into windowed mode. Drag the windows somewhere else like another monitor.

We already started it up. Let's jump to it. Right-click in Jump to Source so we can see which port this is on. Looks like it's on port 8080. If I hop over into the browser and go to the local host 8080, you can see we have an Angular app up and running. If I go into source app, seed app, you can see it's loading this template here which is this one.

I'll just change home to away. Hit Save. You can see it changed this to away. It automatically reloaded for me.

The final couple note is, I click OK for this. I'll let editor config override WebStorm's style. Editor config is this file here which tries to format files consistently across editors. WebStorm supports these options.

In TypeScript, it asks us if we want to compile TypeScript to JavaScript. We'll say, "No" because this task that's running in the background that we already started is compiling the TypeScript for us, so we don't need WebStorm to do that for us.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?