Question

我不确定这里发生了什么。我整天都在这。我是Angular2的新手但不是1.以下是我在控制台中遇到的错误：

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Angular 2 in action</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- Load libraries (Note: IE required polyfills, in this exact order_ -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- Configure SystemJS -->
    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/js/main').then(null, console.error.bind(console));
    </script>
</head>
<body>

<div class="container-fluid">
    <App>Loading...</App>
</div>

</body>
</html>

TodoList的

import {Component} from 'angular2/core'
import {TodoService} from "./TodoService";

@Component({
    selector: 'todo-list',
    template:`<div>
        <ul>
            <li *ngFor="#todo of todoService.todos">
            {{todo}}
            </li>
        </ul>
 </div>`
})
export class TodoList{

    constructor(public todoService: TodoService){

    }

}

待办事项-input.ts

import {Component} from 'angular2/core';
import {TodoService} from "./TodoService";

@Component({
    selector: 'todo-input',
    template: `<div>
    <input type="text" placeholder="Enter some text" #myInput>
    <button (click)="onClick(myInput.value)">Click me</button>
  </div>`
})

export class TodoInput{

    constructor(public todoService: TodoService){

    }

    onClick(value){
        this.todoService.todos.push(value);
        console.log(this.todoService.todos);
    }
}

main.ts

import {bootstrap} from 'angular2/platform/browser';
import {Component} from "angular2/core";
import {TodoService} from "./TodoService";
import {TodoInput} from "./todo-inputs";
import {TodoList} from "./ToDoList"

@Component({
    selector: '<App>',
    directives: [TodoInput,TodoList],
    template: `<div>
         <todo-input></todo-input>
         <todo-list></todo-list>
</div>`
})
class App{

}

bootstrap(App,[TodoService]);

TodoService.ts

import {Injectable} from "angular2/core";

@Injectable()
export class TodoService {
    todos =[];
}

我已经反复分析了几个小时，我看不出有什么不对。该项目也在GIT project

上传到GIT

Answer 1

你的选择器，在main.ts中，应该是App，而不是<App>。

该消息告诉您<App>不是有效的选择器，BTW。

Angular 2应用无法识别index.html中的<app> </app>

1 个答案: