0

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

DRobertE
  • 3,478
  • 3
  • 26
  • 43

1 Answers1

1

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

Community
  • 1
  • 1
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • Basically you need to add setting in tsconfig. Add this to compileOptions ’ "module": "commonjs", "removeComments": false, "sourceMap": true, "target": "es5", "outDir": "../wwwroot/app", "experimentalDecorators": true, "emitDecoratorMetadata": true' – Pankaj Parkar Jan 30 '16 at 05:46
  • already had that in my tsconfig.json. boy this is frustrating – DRobertE Jan 30 '16 at 13:34
  • I don't see `outDir` options in your `tsconfig.json`, by having that option, you could transpiled `js` file in other folder like by having `"outDir": "../wwwroot/app",` – Pankaj Parkar Jan 30 '16 at 13:36
  • I added outDir... but ti still won't compile/transpile because it still can't find those imports. It's like it doesn't see angular – DRobertE Jan 30 '16 at 14:07
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/102079/discussion-between-pankaj-parkar-and-droberte). – Pankaj Parkar Jan 30 '16 at 14:07