Angular 2 App nicht erkennen <app></app> in index.html

Ich bin nicht sicher, was hier vor sich geht. Ich war den ganzen Tag hier. Ich bin neu in Angular2 aber nicht 1. Hier sind die Fehler, die ich in meiner Konsole bin immer:Angular 2 App nicht erkennen <app></app> in index.html

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){ 

    } 

}

todo-Eingang .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 210

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 =[]; 
}

Ich habe es überprüft über stundenlang, und ich kann nicht sehen, was falsch sein könnte. Das Projekt wird auch auf GIT unter GIT project

Quelle

2016-07-02 Drew1208

hochgeladen. Ihr Selektor in main.ts sollte App, nicht <App> sein.

Die Meldung besagt, dass <App> kein gültiger Selektor ist, BTW.

Quelle

2016-07-02 22:38:58

Ich kann nicht einmal die Wut ausdrücken, die ich gerade jetzt gegen mich habe. Vielen Dank! – Drew1208

Sie sollten dies versuchen: es funktioniert: https://en.wikipedia.org/wiki/Rubber_duck_debugging –

Angular 2 App nicht erkennen <app></app> in index.html

Antwort

Verwandte Themen