Angular 2 app not recognizing <app></app> in index.html

Question

I am not sure what is going on here. I have been at this all day. I am new to Angular2 but not 1. Here are the errors I am getting in my console:

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

I am have analyzed it over and over for hours and I cannot see what could be wrong. The project is also uploaded on GIT at GIT project

Answer 1

Your selector, in main.ts, should be App , not <App> .

The message tells you that <App> is not a valid selector, BTW.

Angular 2 app not recognizing <app></app> in index.html

Question

1 answers

solution1
3 ACCPTED 2016-07-02 22:38:58

Angular 2 app not recognizing <app></app> in index.html

Question

1 answers

solution1 3 ACCPTED 2016-07-02 22:38:58

solution1
3 ACCPTED 2016-07-02 22:38:58