Getting warnings in Webstorm when compiling Typescript that contained Angular2 imports

Question

I just took an example from here https://angular.io/guide/quickstart

I've done all according to the quickstart manual. But getting warnings in WebStorm console when my app.ts is compiling.

Here is details:

I am on Windows 8.1 x64, Webstorm 11.0.1

app.ts:

import {bootstrap, Component} from 'angular2/angular2';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 3 App</h1>'
})
class AppComponent { }
bootstrap(AppComponent);

tsconfig.json:

   {
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "sourceRoot": "/"
  },
  "exclude": [
    "node_modules"
  ]
}

I was placing tsconfig.json file to app folder and in the root.

The app.ts actually getting file compiled but getting warnings for some reason:

error TS1148: Cannot compile modules unless the '--module' flag is provided.
error TS2307: Cannot find module 'angular2/angular2'.
error TS1205: Decorators are only available when targeting ECMAScript 5 and higher.
error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning.

I've got typings included

My folders structure

Edit:

After I set tsconfig.json in settings the errors disappeared from Typescript window

but got errors in Run output and in code editor:

Have no issues with tsconfig.json:

UPDATE:

File -> Settings -> Languages & Frameworks -> TypeScript helped to switch to the tsconfig.json. Then I resolved the next issues by disabling Typescript watcher that I had enabled before manually: File -> Settings -> Tools -> File Watchers. Now with these settings everything is working fine.

Answer 1

You need to go into File -> Settings in Webstorm. And then on the settings sidebar go to Languages & Frameworks -> TypeScript.

Then in the TypeScript settings page there is a radio button option for Set options manually or Use tsconfig.json. Select the tsconfig option and then apply changes and close. Then webstorm should know to use the tsconfig options when compiling the TypeScript.