Angular 2, Visual studio 2015 update 1, Type Script Configuration

Question

For the past week I have been trying to configure and start a very simple project using the following config:

Angular 2, Visual studio 2015 update 1, Type Script Configuration

I have a tsconfig.Json in root of my project with following content:

{
    "compilerOptions": {
        "rootDir": "src",
        "outDir": "web/js",
        "target": "es5",
        "module": "system",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "listFiles": true
    },
    "exclude": [
        "wwwroot",
        "node_modules"
    ],
    "filesGlob": [
        "app/**/*.ts"
    ]
}

I can see the virtual project in Solution explorer, angular and all required packages are installed as mentioned in angular.io 5 minute tutorial (https://angular.io/guide/quickstart).

This is what I have in my App.ts:

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

The error I'm getting is:

Symbol 'component can not be properly resolved, probably its located in an inaccessible module'

Same config works in VS Code with no issues.

I would be thankful if you can show what am I missing.

Thanks.

Answer 1

found a workaround for now, will contact the resharper support and share the response here.

User "ctrl+ alt + shift + 8" keyboard shortcut to disable resharper quickly. Even after this I was not getting intellisense,to fix that in resharper settings change Typescript intellisense to Visual studio.

After this 2 changes I don't get any fake error messages.

Hope this helps other people having the same issue.

Answer 2

I've disabled resharpers typescript inspection for now as I'm using 2016.2.2 and it's still causing issue's with typescript 2.0.3 for me.

Resharper > Options > Code Inspection > Settings

Find 'File masks' (bottom right) and add *.ts

Answer 3

If you have Resharper -> Check your Resharper Typescript Language settings. After Update 1 Typescript may update to 1.7 on your project, but Resharper currently only detects to 1.6. The default setting is to Auto Detect causing errors.

Answer 4

This was a bug in Resharper, which is fixed in Resharper 2016.1.

Try updating to the latest version, and be sure to set Resharper back to auto-detect the Typescript version if (like me) you set it to 1.6 manually.