0
我在角度官方網站下面的英雄教程。Angular 2英雄教程錯誤：選擇器「我的應用程序」沒有匹配任何元素
我使用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開發者控制檯。
我試圖改變app-root到my-app在index.html或app.component.ts的selector值變更my-app到app-root。沒什麼幫助。
這是我第二次在過去的一年裏從零開始嘗試教程，但我相信我面臨同樣的問題（不太清楚我最後一次遇到什麼確切的問題，但放棄了到期到一些錯誤）。這讓我覺得教程有些問題。
但是，當我谷歌，我找不到任何其他誰有這個問題。有幾個人有
my-app not matching any elements
問題，但不是從英雄教程。
其他誰試過英雄教程？你有這個問題嗎？我被困在這一點，不能繼續本教程。
你想要我的代碼？正如我所說的那樣，在將路由添加到等式之前，它與教程中給出的相同。
謝謝。
更新：
我說我的代碼是一樣的，在本教程中，哦，還是有一些區別：1）我用templateUrl在教程使用模板，2）我沒有使用那些大字體h1，我正在使用div。
所以相關的代碼在下面，但是這不會讓你繼續下去，除非你按照教程來實施項目，因爲項目中有很多其他文件。我很好奇，有沒有人成功地貫穿整個教程而不會遇到任何問題？如果是，那麼我可能會做錯事，但除此之外，我懷疑教程中有什麼錯誤。
//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（{0}，'my-app'...或者什麼？ –
是的，如果你可以發佈你的index.html文件內容和你的AppComponent會有所幫助，這樣我們就不必通過教程來獲得與你目前相同的點。:-) – DeborahK
可能的https://stackoverflow.com/q/35644123/4488121 –