Enable Angular CLI in WebStorm

Question

I have an existing project for which I want to enable Angular CLI in WebStorm. I have successfully used the CLI functionality in WebStorm in 'pure' Angular CLI projects.

I've made sure that the NodeJS and AngularJS plugins are enabled in WebStorm.

If I run ng version in the project I get:

@angular/cli: 1.0.0-rc.1
node: 6.10.0
os: darwin x64
@angular/common: 2.4.6
@angular/compiler: 2.4.6
@angular/core: 2.4.6
@angular/forms: 2.4.6
@angular/http: 2.4.6
@angular/platform-browser: 2.4.6
@angular/platform-browser-dynamic: 2.4.6
@angular/router: 3.4.6
@angular/cli: 1.0.0-rc.1
@angular/compiler-cli: 2.4.6
@angular/platform-server: 2.4.6
@angular/tsc-wrapped: 0.3.0

And the contents of my 'manually created' .angular-cli.json is:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "blaha-client"
  },
  "apps": [
    {
      "root": "src/client"
    }
  ],
  "defaults": {
    "styleExt": "scss"
  }
}

The CLI works from the terminal prompt but the wizard functionality in WebStorm cannot be found under 'right-click->new'. From the actions menu I can search the Angular CLI but when I click in nothing happens.

Anybody knows what I am missing?

EDIT: I do not wish to convert the project to a cli project entirely, only to be able to use the wizard-like functionality in WebStorm.

EDIT: Note that as of 2019, 'angular-cli.json' has been renamed 'angular.json'

Accordingly to this message it is enough to have angular-cli.json in the project root. I've just tested this in PhpStorm 2016.3.2 with that file completely empty and Angular CLI options are there. What the IDE version BTW? — LazyOne
– LazyOne, Commented Mar 6, 2017 at 12:13
I've got WebStorm 2016.3.3. I've noticed that projects created with angular-cli-1.0.0-beta24 creates a angular-cli.json but the ones I create with angular-cli-1.0.0-rc1 creates a .angular-cli.json probably throwing WebStorm of. — Hampus
– Hampus, Commented Mar 6, 2017 at 13:24
Try 2017.1 EAP build it should support new file name .angular-cli.json already (not checked myself though). — LazyOne
– LazyOne, Commented Mar 6, 2017 at 13:32
For Angular6 this file is now angular.json. And instead of (right-click) -> new ->Angular cli... it's now (right-click) -> new ->Angular Schematic... — Roger
– Roger, Commented Aug 15, 2018 at 5:00

LazyOne · Accepted Answer · 2017-03-06 13:53:36Z

4

Accordingly to this message it is enough to have angular-cli.json in the project root. I've just tested this in PhpStorm 2016.3.2 with that file being completely empty and Angular CLI options are there in File | New... menu.

For .angular-cli.json support (the same file but with leading dot -- as of 1.0.0-rc.0) -- try 2017.1 EAP build -- it should support new file name already.

answered Mar 6, 2017 at 13:53

LazyOne

167k49 gold badges420 silver badges422 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam · Accepted Answer · 2019-06-17 14:35:34Z

3

Note that as of 2019, 'angular-cli.json' has been renamed 'angular.json'

answered Jun 17, 2019 at 14:35

Adam

1411 silver badge11 bronze badges

Collectives™ on Stack Overflow

Enable Angular CLI in WebStorm

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related