Question

当我尝试运行基本的Angular 2代码时，Chrome DevTools会给我以下异常：

EXCEPTION：选择器“app”与任何元素都不匹配

三个相关文件是：

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

}

我已经确认我的开发工作区很好;其他代码按预期工作。这是针对Udemy课程 Angular 2的完整指南，我在代码中输入了几次尝试捕获任何拼写错误。任何帮助将不胜感激 - 谢谢！

Answer 1

您的body元素需要包含<app></app>

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

Answer 2

确定您使用了 app-routing 模块并且必须更改选择器：“app”到“app-root” app.component.ts：

   @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })

Angular 2 EXCEPTION：选择器“app”与任何元素都不匹配

2 个答案: