Webstorm new angular2 project

Hello, I have used RubyMine and PHPStorm quite successfully in the past. I'm now doing the trial for WS as I'm in the process of selecting an IDE for a new Angular2 app. I've run through the angular 2 quick start guide and tour of heroes tutorial. I can make a project work doing it from scratch using their guide with a regular text editor and a terminal so I must be missing something about the starter project WS creates.

I successfully got the project created and found the issue with the ts transpiler version so I pointed WS at my locally installed 2.x version of typescript.

However, when I start the app or debug it, chrome opens and just says "Loading..." but as I understand it, I should be seeing the startup projects module/component interpreted template which says "app works!"

That never happens and I can find no errors. There is nothing in the browsers console and nothing in the WS console. What am I missing here?

 

5 comments
Comment actions Permalink

> I can make a project work doing it from scratch using their guide with a regular text editor and a terminal so I must be missing something about the starter project WS creates.

 

WebStorm itself doesn't force you to use this or that project skeleton, generator, etc. - just use whatever you want. See also the disclaimer in https://blog.jetbrains.com/webstorm/2016/04/angular-2-workflow-in-webstorm/:

Disclaimer: This blog post is not intended as a tutorial for getting started with Angular 2. If you’re new to Angular 2, we suggest you to go through the Angular 2 Quickstart first. 

as you are new to Angular2, just start with Angular2 Quickstart. You can create a new empty Static Web project in WebStorm and start populating it with your stuff following the steps in tutorial, or download the project stub from https://github.com/angular/quickstart and open project folder in WebStorm using File | Open..

 

>However, when I start the app or debug it, chrome opens and just says "Loading..." but as I understand it, I should be seeing the startup projects module/component interpreted template which says "app works!"

what way do you use to run it? You have 2 options here:

- follow the tutorial instructions/readme: compile and run the simple node.js server using 

npm start

(can be done from NPM toolwindow); then create the JavaScript Debug run configuration, specify http://localhost:3000/ as URL and hit Debug to start your application on the`lite-server`.

- compile the app using built-in compiler (make sure to enable 'use tsconfig.json'), then right-click your index.html anf press Debug - it will start the application on built-in webserver

 

Both options work fine for me, application is successfully loaded

 

0
Comment actions Permalink

Hi, thank you for your reply.

> WebStorm itself doesn't force you to use this or that project skeleton, generator, etc. - just use whatever you want.

No, it doesn't but I'm accustomed to JetBrains products at least providing a working on to help accelerate development which is one of the selling points for using an IDE in the first place.

> See also the disclaimer in ........ as you are new to Angular2, just start with Angular2 Quickstart.

Perhaps you missed my comment mentioning I had already run through the tutorials and poured over all the docs for quite some time. This question is about an IDE and the projects it generates.

> what way do you use to run it?

I hit the Run or Debug button in the tool bar. Again, one of the selling points of using an IDE

> - follow the tutorial instructions/readme: compile and run the simple node.js server using npm start

I did try this. I get the same result, just "Loading..." I'm pretty sure there is something messed up with the project that WebStorm created with angular-cli

> - compile the app using built-in compiler (make sure to enable 'use tsconfig.json'), then right-click your index.html anf press Debug - it will start the application on built-in webserver

This produces the same result. I did get the Chrome extension and that all seems to be working OK but the generated app still doesn't run. I'm new enough to angular that I can't readily and easily debug the problem

Hmm, I wonder why neither option works for me. I even tried it with a clean install of both nodejs and webstorm with the same issue. I running the Windows version of WS for what it's worth.

 

 

 

0
Comment actions Permalink

> I'm pretty sure there is something messed up with the project that WebStorm created with angular-cli

WebStorm itself doesn't create a project. It's angular-cli that does it, WebStorm just runs the corresponding command.

Did you try creating angular app though angular-cli in terminal (ng init --name=prj_name)?

I just tried the following (using the most recent angular-cli and WebStorm 2016.2.4);

- create a new project using File | New | Project | Angular CLI

- once project is created and dependencies installed, right-click package.json, choose 'Show npm scripts'

- in NPM tool window, click 'start' to start 'ng serve' cli command

- once the bundle is created and server started, create a new javaScript Debug run configuration with http://localhost:4200/ URL, press Debug => application is successfully loaded:

>I even tried it with a clean install of both nodejs and webstorm with the same issue

this clearly won't help, as the problem is not in WebStorm and likely not in node.js. What is logged in debug console when you start your app? Please provide your project and screencast that shows your steps

1
Comment actions Permalink

I think the problem is lack of understanding on what's happening with the 'Run as...' with Webstorm.

 

Similar to the problem listed above, I have no problem creating a new app through Webstorm and angular-cli or directly from the command prompt and anguliar-cli.  What I do have a problem is understanding why I have to execute npm start/ng serve for the angular-cli example to load correctly in the browser but I have other Webstorm project examples where all I need to do is 'Run as <html>' and the app has no problem loading.

I have the typescript compiler enabled. I don't see any difference in the project/run configurations on why the POCs would behavior differently.

I'm positive is my lack of experience working with angularjs/typescript and Webstorm but can't find what piece I'm missing.

0
Comment actions Permalink

>I think the problem is lack of understanding on what's happening with the 'Run as...' with Webstorm.

 

it depends on the context. But, in general, this action creates run configuration associated with current context and runs it - or runs the configuration if it has been already created

 

>What I do have a problem is understanding why I have to execute npm start/ng serve for the angular-cli example to load correctly in the browser but I have other Webstorm project examples where all I need to do is 'Run as <html>' and the app has no problem loading.

 

When running 'ng serve', you first start the build process that creates the application bundle, and then run development LiveReload server application is hosted on. Once the server is up and running, you can load application in browser.

When you right-click .html file and choose 'Debug' in WebStorm, your application is started on the built-in webserver. This is perfectly fine for applications that don't require pre-building, don't have special routing, etc. But won't work for applications created with angular-cli

1

Please sign in to leave a comment.