CODEWITHSUNDEEP
angular
Mike McGuire
Mike McGuire

Reputation: 339

Angular 2 EXCEPTION: The selector "app" did not match any elements

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!

Upvotes: 1

Views: 4000

Answers (2)

sina hendizadeh
sina hendizadeh

Reputation: 11

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']
    })

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657248

Your body element needs to contain <app></app>

<body>
  <app></app>
</body>

Upvotes: 3

Related Questions