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.

I'm not sure if this issue is related to your problem or not, but it worths a read. — Eric Martinez
I just wanted to add that lately I have been getting this even though I do have the right setting in my tsconfig and WS is pointing to that config file. For some reason I have to restart WS and then everything is fine again. — LeftOnTheMoon

Marc Harry Marc Harry · Accepted Answer · 2015-11-27T09:15:05

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.

Getting warnings in Webstorm when compiling Typescript that contained Angular2 imports

1 Answers