Webstorm 10 Code Completion not working with AngularJS controllerAs syntax

Question

I'm trying out WebStorm because it claims to have superior code completion when working with AngularJS projects. I'm using version 10.0.2 and ran into a code completion issue already using the AngularJS seed project.

I’m trying to use the controllerAs syntax to specify the controller viewmodel’s name inside the $routeProvider as follows.

'use strict';

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl',
    controllerAs: 'vm'
  });
}])

.controller('View1Ctrl', [function() {
      var vm = this;
      vm.hello = 'Hello World';
}]);

Controller & Route Config

However, inside the template html I get a “unresolved variable or type” warning. (a squiggly line under vm)

<p>This is the partial for view 1.</p>
<div>{{vm.hello}}</div>

HTML warning

But the page loads just fine when I run it

I'd show the pictorial proof but I need more rep first:^)

Again, I’m just using the OOTB AngularJS Project that is listed as one of the base templates to create a new WebStorm project so I would expect everything is already configured properly for Angular to work properly. I’ve also watched a Pluralsight video where this kind of code completion seemed to work, although it was in WebStorm 9 not 10.

I checked and I have the AngularJS Plugin enabled. I also tried downloading the typsescript community stub Javascript Library for angularjs, but it didn’t seem to help. I generated the project using "Generating an AngularJS Application Stub" which according to the docs should give me Angular support.

Any help would be greatly appreciated.

Answer 1

You can work around this by adding jsdoc comment

/**
 * @name vm
 * @type View1Ctrl
 */

Answer 2

I heard from JetBrains support that both 'controllerAs syntax' and 'Router support' are both under development still and are planned to be improved upon in the future.

If like me you want to support these efforts you can vote for them here:

https://youtrack.jetbrains.com/issue/WEB-11175

https://youtrack.jetbrains.com/issue/WEB-10654