Angular2エラーインラインテンプレート：1：20原因：最大呼び出しスタックサイズを超えました

Question

まず、このコンソールエラーに関連するいくつかの類似のポストがあることを完全に認識していると言って始めます。

通常、私はそれらを参照しますが、Angular2をゼロから合計5日間使用しています。これは私が今まで使ってきた最初のJSフレームワークなので、問題を別のものに関連付けるのが難しくなっています。私を細断する前に気をつけてください！

私の問題に移って、私はサイトのための非常に基本的な足場を一緒に束ねることができました。そして、私は基本的にサイトの各 "ページ" 'home'、 'contact'、 'navbar'、 'footer'）。私はルーティングを実装しようと試み始めました。そうすれば、URL = ''のときに家にリダイレクトされるか、特定のアドレスを置くとそれに応じて指示されます。

サイトがロードされるとすぐに、このコンソールエラーが表示されます。 "エラー：./HomeComponentクラスHomeComponent - インラインテンプレート：1：20原因：最大呼び出しスタックサイズを超えました"というエラーが表示されます。

これまでのところ、私は繰り返し機能を持っていると言いましたが、変数を削除しようとしましたが（これまでのクラスにはほとんど0のコードが含まれていました）ここで

は私のapp.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
 
import { NgModule } from '@angular/core'; 
 
import { RouterModule, Routes } from '@angular/router'; 
 
import { FormsModule } from '@angular/forms'; 
 
import { HttpModule } from '@angular/http'; 
 

 
import { AppComponent } from './app.component'; 
 
import {HomeComponent} from './home/home.component'; 
 
import {ContactComponent} from './contact/contact.component'; 
 
// import {ProjectListComponent} from './projectlist/projectlist.component'; 
 
// import {ProjectDetailComponent} from './projectdetail/projectdetail.component'; 
 
// import {ProjectComponent} from './project/project.component'; 
 
import {NavbarComponent} from './navbar/navbar.component'; 
 
import {FooterComponent} from './footer/footer.component'; 
 

 
const appRoutes: Routes = [ 
 
    { path: 'home', component: HomeComponent }, 
 
    { path: 'contact', component: ContactComponent }, 
 
    // { path: 'project/:id',  component: ProjectDetailComponent }, 
 
    // { 
 
    // path: 'projects', 
 
    // component: ProjectListComponent, 
 
    // data: { title: 'Projects List' } 
 
    // }, 
 
    { path: '', 
 
    redirectTo: '/home', 
 
    pathMatch: 'full' 
 
    }, 
 
    // { path: '**', component: PageNotFoundComponent } 
 
]; 
 

 
@NgModule({ 
 
    declarations: [ 
 
    AppComponent, 
 
    HomeComponent, 
 
    ContactComponent, 
 
    // ProjectListComponent, 
 
    // ProjectDetailComponent, 
 
    // ProjectComponent, 
 
    NavbarComponent, 
 
    FooterComponent 
 
    ], 
 
    imports: [ 
 
    RouterModule.forRoot(appRoutes), 
 
    BrowserModule, 
 
    FormsModule, 
 
    HttpModule 
 
    ], 
 
    providers: [], 
 
    bootstrap: [AppComponent] 
 
}) 
 
export class AppModule { }

app.component.ts

import { Component } from '@angular/core'; 
 
import {HomeComponent} from './home/home.component'; 
 
import {ContactComponent} from './contact/contact.component'; 
 
// import {ProjectListComponent} from './projectlist/projectlist.component'; 
 
// import {ProjectDetailComponent} from './projectdetail/projectdetail.component'; 
 
// import {ProjectComponent} from './project/project.component'; 
 
import {NavbarComponent} from './navbar/navbar.component'; 
 
import {FooterComponent} from './footer/footer.component'; 
 

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

 
}

home.component.tsです

import {Component} from '@angular/core'; 
 
import {HomeService} from './home.service'; 
 

 
@Component({ 
 
    selector: 'home', 
 
    templateUrl: './home.component.html', 
 
    providers: [HomeService] 
 
}) 
 

 
export class HomeComponent { 
 
    private title; 
 

 
    constructor(homeService: HomeService) { 
 
    this.title = homeService.getContent(); 
 
    } 
 
}

私はあなたが私のHTMLを必要とするかはわからないが、ここでapp.component.html

<navigation></navigation> 
 
<router-outlet></router-outlet> 
 
<footer class="footer"></footer>

とhome.component.htmlです（私はそれが現時点では基本だと言ったように）

私はかなりこれまでに困惑してい

<home> 
 
    <h1>{{title}}</h1> 
 
</home>

は、私がで取ることたくさんあり実現し、私はオンラインコースのカップル（それがベータ版からの変更によって簡単に行われていないに従うことをしようとしていますほとんどのコースは現時点でかなり古いようです）。

とにかく私は本当にあなたが私に提供できる助けに感謝し、私はこのnoobを少しだけnoobにするのに時間を割いていただき、本当に感謝しています。

Answer 1

問題はhome.component.htmlに<home>タグが含まれていることです。これにより、無限に新しいホームコンポーネントが作成され、呼び出しスタックの最大サイズを超えてエラーが発生します。

<home> 
    <home> 
     <home> 
      ... 
     </home> 
    </home> 
</home>