Angular 2 EXCEPTION: The selector “app” did not match any elements
Question
Chrome DevTools is giving me the following exception when I attempt to run my very basic Angular 2 code:
EXCEPTION: The selector "app" did not match any elements
The three relevant files are:
(1) boot.ts
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./app.component";
bootstrap(AppComponent);
(2) app.component.ts
import {Component} from 'angular2/core';
import {PuzzleComponent} from "./puzzle/puzzle.component";
@Component({
selector: 'app',
template: `
<my-puzzle></my-puzzle>
`,
directives: [PuzzleComponent]
})
export class AppComponent {
}
(3) puzzle.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'my-puzzle',
template: `
Random text
`
})
export class PuzzleComponent{
}
I've confirmed that my development workspace is fine; other code works as expected. This is for the Udemy course The Complete Guide to Angular 2 , and I've typed in the code a couple of times trying to catch any typos. Any help would be greatly appreciated - thanks!
2 answers
solution1
3 ACCPTED 2016-05-30 04:22:40
Your body element needs to contain <app></app>
<body>
<app></app>
</body>
solution2
0 2021-07-14 23:43:53
sure you use app-routing module and must change the selector: 'app' to 'app-root' app.component.ts:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.