【发布时间】：2017-08-29 13:58:31
【问题描述】：
我正在关注angular官网的英雄教程。
我使用 CLI 生成了项目。
在第 6 部分路由之前一切正常：https://angular.io/tutorial/toh-pt5
我在路由之前更新了代码，教程说：
应用仍在运行并显示英雄。
但是，我收到以下错误：
选择器“my-app”没有匹配任何元素
来自 Chrome 开发控制台。
我尝试将index.html 中的app-root 更改为my-app，或者将app.component.ts 的selector 值中的my-app 更改为app-root。没有任何帮助。
这是我在过去一年中第二次从头开始尝试本教程，但我相信我面临同样的问题（不太记得我上次遇到的确切问题，但由于一些错误）。这让我觉得教程有问题。
但是，当我用谷歌搜索时，我找不到其他遇到此问题的人。有几个人有
我的应用不匹配任何元素
问题，但不是来自英雄教程。
还有其他人尝试过英雄教程吗？你有过这个问题吗？我被困在这一点上，无法继续本教程。
你想要我的代码吗？正如我所说的，它与在将路由添加到方程式之前在教程中给出的相同。
谢谢。
更新：
我说我的代码和教程里的一样，哦，好吧，有一些区别：1）我使用templateUrl，教程使用模板，2）我没有使用那些大字体h1，我使用的是分区。
因此，相关代码在下面，但除非您按照教程 CLI 对项目进行了 CLI，否则这不会让您继续前进，因为项目中有大量其他文件。我很好奇，有没有人成功地完成了整个教程而没有遇到任何问题？如果是，那么我可能做错了，否则，我怀疑教程有问题。
//app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Tour of Heroes';
}
//app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div>
Welcome to {{title}}!
<my-heroes></my-heroes>
</div>
//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent,
HeroDetailComponent,
HeroesComponent
],
providers: [HeroService],
bootstrap: [AppComponent]
})
export class AppModule { }
//hero-detail.component.ts
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'hero-detail',
templateUrl: 'hero-detail.component.html'
})
export class HeroDetailComponent {
@Input() hero: Hero;
}
//hero-detail.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div>
<div *ngIf="hero">
<div>{{hero.name}} details</div>
<div><label>id:</label>{{hero.id}}</div>
<div><label>name:</label><input [(ngModel)]="hero.name" placeholder="name" /></div>
</div>
</div>
//hero.service.ts
import { Injectable } from '@angular/core';
import {Hero} from './hero';
import {HEROES} from './mock-heroes';
@Injectable()
export class HeroService {
getHeroes(): Promise<Hero[]> {
return Promise.resolve(HEROES);
}
getHeroesSlowly(): Promise<Hero[]> {
return new Promise(resolve=> {
setTimeout(()=>resolve(this.getHeroes()), 2000);
});
}
}
//hero.ts
export class Hero {
id: number;
name: string;
}
//heroes.component.html
import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@Component({
selector: 'my-heroes',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class HeroesComponent implements OnInit {
title = 'Tour of Heroes';
heroes: Hero[];
selectedHero: Hero;
constructor(private heroService: HeroService) {}
onSelect(hero: Hero): void{
this.selectedHero = hero;
}
getHeroes(): void {
this.heroService.getHeroesSlowly().then(heroes => this.heroes = heroes);
}
ngOnInit(): void {
this.getHeroes();
}
}
//mock-heroes.ts
import {Hero} from './hero';
export const HEROES: Hero[] = [
{id: 11, name: 'Mr. Nice'},
{id: 12, name: 'Narco'},
{id: 13, name: 'Bombasto'},
{id: 14, name: 'Celeritas'},
{id: 15, name: 'Magneta'},
{id: 16, name: 'RubberMan'},
{id: 17, name: 'Dynama'},
{id: 18, name: 'Dr IQ'},
{id: 19, name: 'Mr. Nice'},
{id: 20, name: 'Magma'},
{id: 21, name: 'Tornado'}
];
//index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My NG App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<my-root></my-root>
</body>
</html>
//main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
【问题讨论】：
-
你的
AppComponent类是什么样子的，你是在声明@Component({ selector: 'my-app'...之类的选择器还是什么？ -
是的，如果您可以发布您的 index.html 文件内容和您的 AppComponent，那将会很有帮助。这样我们就不必通过教程来达到你目前的水平。 :-)
-
@LenilsondeCastro：我看过你链接的那个。看起来相似，但不一样。
-
@DeborahK：我已经用相关代码更新了帖子。您将需要 CLI 英雄项目并插入我的相关文件以进行测试。谢谢。
标签： angular