

#Debug angular in webstorm trial#
You can also create a new tsconfig.json file using a template via the New file popup ( Cmd-N on OS X and Alt-Insert on Windows and Linux).I finally got it to work after much trial and error. Press Alt-Enter or just start typing to get a list of all properties and their available options. WebStorm 2016.1 has greatly improved coding assistance for the tsconfig.json file. You can enable that in Preferences | Languages & Frameworks | TypeScript. At the same you will be able to benefit from WebStorm’s refactoring capabilities and more. It might provide more precise results and work faster compared to the WebStorm’s own coding assistance. This option may be useful if you have some other build tool running the compilation.Įxperimental: WebStorm 2016.2 adds experimental integration with the TypeScript internal service that provides code completion and analysis.

Tip: If you want to see errors from the compiler in the editor without automatically generating compiled files along the way, in your tsconfig.json file specify "compileOnSave": false. Double-click the error message to jump to the source code. Or you can assign them to the shortcut of your choice in Preferences | Keymap.Īny errors occurred during compilation would be shown in this tool window and also right in the editor (if you have enabled the Track changes compiler option). These actions are available via Find action popup (Cmd-Shift-A) or on the TypeScript Compiler tools window.
#Debug angular in webstorm code#
There are two modes in which you can use a built-in TS compiler: it can either compile your code automatically as you write the code (check Track changes option), or you can trigger it manually with Compile All or Compile Current File actions. To do so, click Edit… next to the compiler version in Preferences and specify a path to the TypeScript compiling service ( lib folder in the TypeScript package with typescriptServices.js and lib.d.ts files). You can configure WebStorm to use a different version of the TypeScript compiler.

Using different version of TypeScript compiler That way TypeScript compiler will generate source map file with inlined sources and when debugging the code the breakpoints set in the TypeScript code will be properly hit. If you’d like to debug your TypeScript code using WebStorm or Chrome, make sure you add these two compiler options in the project tsconfig.json file: These would then be used instead of the options in a tsconfig.json file (though we recommend using tsconfig.json). You can configure the compiler behavior in Preferences | Languages & Frameworks | TypeScript.įor example, you can select Set options manually and specify the required compiling options as a command line arguments. If you have a tsconfig.json file in your project, WebStorm will retrieve all the compiler options and project configuration from it and use them automatically. Once you open a TypeScript file, WebStorm will suggest enabling its built-in TypeScript compiler to compile your code to JavaScript. To help you quickly get started with a new TypeScript project, WebStorm offers a built-in TypeScript compiler that you can use instead of configuring some other build tool. TypeScript is getting more and more popular recently, especially for Angular 2 projects.
