visual-studio-2015angulartypescript1.7

Why is visual studio 2015 not recognizing annotations

Visual Studio is not recognizing the @Componetn or @View Data annotiations? Does anyone know why this might be occuring.enter image description here

Update 1

My index.html file

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2</title>
    <meta charset="utf-8" />
</head>
<body>
    <my-app></my-app>

    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.2/angular2.dev.js"></script>
    <script>System.import('app');</script>
</body>
</html>

My app.ts file

import {Component, View} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {NgFor} from 'angular2/common';

@Component({
    selector: "my-app",

})

@View({
    templateUrl: 'mainForm.html',
    directives: [NgFor]
})

class TodoAppComponent {

    todos: Array<Object>;

    constructor() {
        this.todos = [{ text: "Try Second", done: true }]
    }

    get() {
        return this.todos;
    }

    add($event, newtodo) {

        if ($event.which === 13) {
            this.todos.unshift({ text: newtodo.value, done: false });
            newtodo.value = ''
        }

    }

    markAsDone(todo) {
        todo.done = !todo.done;
    }
}

bootstrap(TodoAppComponent);

Update 2

Build error in VS2015 enter image description here

Update 3

This was already in my tsconfig.json

{
    "version": "1.7.6",
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true
    },
    "filesGlob": [
        "./**/*.ts",
        "!./node_modules/**/*.ts"
    ],
    "files": [
        "./app.ts",
        "./typings/angular2/angular2.d.ts",
        "./typings/es6-promise/es6-promise.d.ts",
        "./typings/rx/rx-lite.d.ts",
        "./typings/rx/rx.d.ts",
        "./typings/tsd.d.ts"
    ]
}

My Directory Structure, node_nodules to big to expand

enter image description here

Solution

  • The issue is you have trying to import Component & View from angular2/angular2 which has been change in angular.beta.2.0.0. So instead you should import angular2/core instead of angular2/angular2.

    Also make sure all the files are referred on the index.html.

    Refer this answer for more details