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:

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.

Experiencing the same issue with ReSharper enabled. When disabling it everything goes back to normal. — suf, Dec 02 '15 at 08:46
You can find out why the issue is happening and how it is fixed in my downvoted answer at the bottom http://stackoverflow.com/questions/34592390/visual-studio-2015-update-1-enterprise-with-resharper-10-ultimate-cannot-be/34598942#34598942 — Norbert Korny, Feb 19 '16 at 17:58

score 10 · Answer 1 · answered Dec 02 '15 at 23:19

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.

score 9 · Answer 2 · answered Oct 31 '16 at 14:20

9

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

answered Oct 31 '16 at 14:20

MIP1983

1,354
1
15
25

score 4 · Answer 3 · answered Dec 02 '15 at 19:41

4

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.

answered Dec 02 '15 at 19:41

Jeff H

125
1
1
5

score 1 · Answer 4 · answered May 26 '16 at 17:00

1

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.

answered May 26 '16 at 17:00

StriplingWarrior

151,543
27
246
315

1

I was getting the issue in 2016.1, but since my comment is a year after yours, 2016.3.2 is out now. I had to update resharper AND clear my resharper caches and restart VS. Just re-analyzing files and restarting VS was not enough. – Christopher Feb 12 '17 at 21:01

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

4 Answers4