I am working on a little project with AngularJS (1.6.5) in WebStorm. The problem here is that WebStorm is not recognizing any globals AngularJS defines. I have AngularJS installed and the right #types. I also defined AngularJS as an External library and I also made sure that AngularJS is not excluded by WebStorm. Yet WebStorm is still giving me errors.
Example:
logConfig.$inject = ["$logProvider", "$compileProvider"];
function logConfig($logProvider: ng.ILogProvider, $compileProvider: ng.ICompileProvider) {
// $logProvider.debugEnabled(false); //TODO add this in production
// $compileProvider.debugInfoEnabled(false); //TODO add this in production
// Disable comment and class directives. Boosts the performance
$compileProvider.commentDirectivesEnabled(false);
$compileProvider.cssClassDirectivesEnabled(false);
}
The code above gets the following error in WebStorm: Unresolved variable $inject. (the $inject has a red color and the message is given when I hover over it)
Am I missing something?
Update
I may have found the problem. WebStorm doesn't reconsize AngularJS even though it is in my Node_modules, I have the correct typings (#types/angular) and I have registered as an exteral library (file-->settings-->languages & frameworks-->JavaScript-->Libraries).
When I type import * as ng from "an|", and hit "ctrl + space" WebStorm doesn't give me any hints about the angular library. I am guessing these issues are connected.
Anyone knows if there is an other option to make WebStorm reconsize AngularJS?
I found a solution for the problem:
Like Ekaterina Prigara said, somehow my TSLint was disabled. I needed to re-enable it via Settings | Languages & Frameworks | TypeScript | TSLint. After I re-enabled it I restarted my WebStorm and got the error: Error: Initialization error (typescript). Cannot read property 'createHash' of undefined. I then removed my node_modules folder and reinstalled it via npm install. After that everything was working again.
Related
Is there a way for WebStorm to "see" the methods in my HTML and link them with their respective component class?
Details
I usually write my component controller in one file and the component template (html) in another file.
When I do this, methods that are only used in the template are marked as "unused" by WebStorm, and they throw a warning.
For example, in the component ctrl I have a handleViewChange() method.
In the template file I have vm.handleViewChange();
WebStorm warns me that handleViewChange is an unused method even though I have used it in the template.
Please note: I am aware that I can suppress the warn for this particular statement. I would rather WebStorm recognized the method is actually used.
Particularly relevant with refactor-happy colleagues (or refactor-happy future me).
Edit #1
I have already enabled the AngularJS library in Webstorm settings, but it does not fix this particular issues.
Downloading angular TypeScript community stubs per suggestion at this post doesn't enable AngularJS support for your project.
You need to have angular.js file (debug version, uncompressed!) in your project (either in your project directory or configured as JavaScript library) - normally it's enough to get Angular directives/methods recognized. See http://blog.jetbrains.com/webstorm/2014/03/angularjs-workflow-in-webstorm/, 'Include angular.js in Your Project' section.
I have been using VSCode for quite a long time and while it's very good, I'm missing intellisense and features that seem to be ES6-only:
I cannot ctrl+click to go to definition
I cannot have a preview of the definition
Here is what I am using:
ES5
Angular JS
All my files are wrapped into a closure, like:
(function() {
angular.module('foo').factory('bar', ['dep1', function(dep1) {
dep1.stuff();
}]);
})();
With that in mind, is it possible to have "goto definition" and other nice VSCode stuff working ? If so, how ?
What can I do to be able to simply click ctrl+click on dep1 and have VSCode open the file where dep1 is defined ?
What I can recommend is that you try to install John Papa's extension for Visual Studio Code for Angular 1.x. It is installed directly through VSCode. You can check some examples of how it works here. It will offer you code completion and it will automate a lot of tasks you frequently do in Angular, such as creating services, controllers, directives...
Btw John Papa is the author of the Angular Style guide and his way of coding could be called "best-practice" in the world of Angular development.
The best way to get intellisense for javascript/typescript is to install typings.
I find that this extension is good with installing typings: https://marketplace.visualstudio.com/items?itemName=benjaminromano.typings-installer
Once you have that installed, you can then launch it (F1 > Typings Installer: Typings > angular) and install the dt~angular typings. from there you should start getting intellisense, go to definition and possibly error checking.
Code should then pick this up (if not just reload the editor). You should then start getting intellisense. If you want to tweak it more, I would suggest looking into jsconfig.json files: https://code.visualstudio.com/docs/languages/jsconfig
You can get general purpose typing information pulled by enabling Synthetic Default Imports in Visual Studio Code.
It lets you get Intellisense either from TypeScript type definitions or by inferenced type information from the JSDoc of many popular repositories.
Here is a tutorial for how to get things set up.
I'm trying to convert a project from Angular 1 to Angular 2.
This is a client & server project with some common code (so I keep it together). I want to use Angular 2 on the client side so I followed the ng2 QuickStart. I am currently trying to build it inside my project.
I am using TSD to manage my dependencies typings. Some of these dependencies like socket.io rely on node.d.ts.
My problem is that angular2 already expose node.d.ts and create an ambient definition so when I want to use TSD with angular2 I get a conflict between the two definitions :
typings\node\node.d.ts(961,9): error TS2300: Duplicate identifier 'path'.
Here is my gulp task :
gulp.task('build.conflict', function(){
var browserProject = tsc.createProject('browser.tsconfig.json', {
typescript: typescript
});
var src = [
'src/browser/**/*.ts',
'typings/**/*.d.ts' // commenting out this line results in unknown modules
];
var result = gulp.src(src)
.pipe(tsc(browserProject));
return result.js
.pipe(gulp.dest('build/browser'));
});
I also set up a simple repository demonstrating my issue.
How can I solve this error while still keeping my TSD typings. (The best solution would be to prevent angular2 to expose its internal node.d.ts)
If you started using Typings, you could only allow discovering *.d.ts from browser dependencies in tsconfig.json. Here is an excellent example at John Papa's NgConf demo.
UPDATE: This is outdated per Typings > 1.0.0.
I'm working with .js files. It is a medium sized angular project. I want to goto a definition (a method on a service that i injected on the controller). It doesn't work - nothing happens when i hit F12 or ctrl+click. Even though this works in SublimeText i can't get it to work here. Perhaps the feature is not implemented.
So i check out John Papa's series on VSC
http://johnpapa.net/getting-started-with-visual-studio-code/
And i notice that there is a feature to search for a symbol in "all files". This would solve my problem. It's not as great as goto (with F12) but i can still navigate relatively quickly to the symbol without knowing the name of the file it was declared in.
When i type it, i get nothing. I hit ctrl+p and type # followed by a few letters. I get 'No symbols matching' nomatter what i type. It won't search my folder for some reason?
I do have one error:
and it refers to missing 'angular' element. That element is ofcourse defined in another file and i fail to see how this would break the functionality.
Using version 0.10.1
You need to install typings for angular to get IntelliSense.
First install tsd:
npm install tsd -g
Next inside your project install angular typing
tsd install angular -rs
(s parameter will create tsd.json).
Alternatively install it from VSC itself
Click on angular word and choose Download type definition angular.d.ts
Edit:
"Open symbol by name" works now only for C# and TypeScript. code.visualstudio.com/Docs/editor/editingevolved
I started using Typescript with Webstorm today and I am getting real crazy understanding what's going on. Imagine a project using tsd loading definition types on typings/. For background, angular defines an angular module aliased to ng and then there is other d.ts files appending more modules into angular (and technically ng).
When I require for example the router I get:
In fact, if you go to angular-route.d.ts (from DefinitelyTyped) you can see the same:
The d.ts files are technically correct because tsc compiles them giving it those definition files.
On the other hand, Webstorm allows you to load libraries (typescript stubs from DefinitelyTyped). If I go there and I download the angular ones (which are 100% the same as the one I have on typings/) I get:
Same error but at least I don't get the red wiggle in the solution explorer. Still, it doesn't give me any intellisense when writing ng.route.<ctrl+space>, it just turn blue when I finish writing it (in fact, I can cmd+click and go to the definition).
Who's failing here? The typescript plugin? It is weird that it fails using typings/ and somehow work with Webstorm's libraries menu (using the same file).
Who's failing here? The typescript plugin?
Yes. You need to use the Webstorm beta channel to get support for TypeScript 1.4 union Types at the moment.