私は公式公式ウェブサイトのHeroesチュートリアルに従っています。角2ヒーローチュートリアルエラー：セレクタ "my-app"が要素と一致しません
私はCLIを使用してプロジェクトを生成しました。
すべてがパートで6ルーティングまで正常に動作します：https://angular.io/tutorial/toh-pt5
私はをルーティングする前に、コードを更新し、チュートリアルは言う：
The app still runs and displays heroes.
しかし、私は次のエラーを取得しています：
The selector "my-app" did not match any elements
Chromeデベロッパーコンソールから。
Iはindex.htmlにmy-appにapp-rootを変更したりapp.component.tsのselector値にapp-rootにmy-appを変更しようとしました。何も助けなかった。
これは私が過去1年間でゼロからチュートリアルを試みている2回目ですが、私は同じ問題に直面していると思います（前回の正確な問題を覚えていませんが、何らかのエラーに）。これはチュートリアルで何か問題があると私に思い出させます。
しかし、私はGoogleのとき、私はこの問題を抱えている誰かを見つけることができません。ヒーローズのチュートリアルではなく、一部の人が
my-app not matching any elements
の問題がありますが、ヒーローズチュートリアルではありません。
ヒーローズのチュートリアルを試している人は誰ですか？この問題はありましたか？私はこの時点で立ち往生しており、このチュートリアルを続行できません。
私のコードが欲しいですか？私が言ったように、これは方程式にルーティングを追加する前にチュートリアルで与えられているのと同じです。
ありがとうございました。
アップデート：
私は私のコードは、チュートリアルと同じであると述べ、まあ、いくつかの違いがあります：1）私は、チュートリアルでは、テンプレートを使用していますtemplateUrlを使用する、2）私はそれらを使用していませんでした大きなフォントh1、divを使用しています。
関連するコードは以下のとおりですが、プロジェクトに他のファイルがたくさんあるため、チュートリアルに従ってプロジェクトを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);
：？「私のアプリ」...'または何 –
はい、あなたはindex.htmlをを投稿することができればファイルの内容とあなたのAppComponentが役に立つでしょう。そうすれば、私たちはチュートリアルの中であなたが現在行っているのと同じことをする必要はありません:-) – DeborahK
https://stackoverflow.com/q/35644123の可能な複製/ 4488121 –