CODEWITHSUNDEEP
javascripthtmlangular
JKK
JKK

Reputation: 446

Getting The selector "app" did not match any elements

I've trimmed this down to the barest of data and I'm baffled as to what is going on. I'm getting the selector not found error in angular 2. Trying to figure out what the problem is, it was working an hour ago now I've added a comma or space or done something to break it and I can't figure out what I've changed! Arrrg

Any help is appreciated! Thanks!

boot.ts

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'app',
    template: `
        <h1>component works!</h1>
    `
})
export class AppComponent {

}

index.html

<!doctype>
<html>
<head>
<base href="/">
<title>Angular 2 Boilerplate</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load libraries -->
<!-- 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.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.js"></script>


<link rel="stylesheet" href="src/css/app.css">
</head>
<body>
<my-app>Loading...</my-app>

<script>
System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
});
System.import('app/boot')
        .then(null, console.error.bind(console));
</script>
</body>
</html>

Upvotes: 0

Views: 807

Answers (2)

JKK
JKK

Reputation: 446

oh no,

I changed the selector name.. duuuh

in the html I need to change <my-app></my-app> to just <app></app> or vice versa. After I changed the selector name in the ts component file it worked.

ug..

Upvotes: 0

Priyesh Kumar
Priyesh Kumar

Reputation: 2857

In your html file, you need to change <my-app> to <app> 

....
</head>
<body>
<app>Loading...</app> <!-- this should match your root component selector -->

<script>
....

Upvotes: 1

Related Questions