Angular2 Fehler Inline-Vorlage: 1: 20, verursacht durch: Maximale Call-Stack-Größe überschritt

Question

möchten zunächst einmal beginne ich sagen, ich bin voll und ganz bewusst, dass es ein paar ähnlichen Beiträge zu dieser Konsole Fehlern im Zusammenhang. Normalerweise würde ich auf diese beziehen, aber ich habe Angular2 von Grund auf für insgesamt 5 Tage verwendet und dies ist das erste JS-Framework, das ich jemals verwendet habe, so versucht, mein Problem mit einem anderen zu verbinden, erweist sich als schwieriger. Bitte bedenken Sie, bevor Sie mich in Stücke reißen!

Nun zu meinem Problem, ich habe es geschafft, ein sehr einfaches Gerüst für eine Website zusammen zu basteln, und ich habe mehrere Komponenten erstellt, die ich grundsätzlich als jede "Seite" der Website behandle (in diesem Fall "Home", "Kontakt", "Navigationsleiste", "Fußzeile"). Ich habe angefangen zu versuchen, Routing zu implementieren, so dass, wenn die URL = '' Sie nach Hause umgeleitet werden, oder wenn Sie eine bestimmte in, richtet es Sie entsprechend.

Das Problem, das ich bekomme, ist, sobald die Website lädt Ich bekomme diese Konsole Fehler: "Fehler: Fehler in der./HomeComponent-Klasse HomeComponent - Inline-Vorlage: 1: 20 verursacht durch: Maximale Call-Stack-Größe überschritten".

Meine Suche hat mir gesagt, dass ich irgendwo eine wiederkehrende Funktion habe, habe ich versucht, die Variablen zu beseitigen (bis jetzt alle meine Klassen enthalten fast 0 Code), aber ich bekomme immer noch diesen Fehler.

Hier ist meine 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(); 
 
    } 
 
}

Ich bin mir nicht sicher, ob Sie meine HTML benötigen, aber hier ist app.component.html

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

und home.component.html (wie ich sagte, es ist grundlegend im Moment)

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

ich ziemlich so weit verwirrt bin, ich weiß, es gibt eine Menge in nehmen ist, und ich versuche, ein paar Online-Kurse zu folgen (es ist nicht durch die Änderungen von Beta leicht gemacht wird , die meisten Kurse scheinen im Moment ziemlich alt zu sein).

Auf jeden Fall tun schätze ich wirklich jede Hilfe, die Sie mir anbieten können und ich die meisten sicherlich zu schätzen Sie die Zeit nehmen, diese Noob zu helfen, etwas weniger Noob sein.

Answer 1

Das Problem ist, dass Ihre home.component.html einen <home> Tag in ihm hat. Dies verursacht, dass es unendlich neue Home-Komponenten erstellt, was dazu führt, dass Ihre maximale Call-Stack-Größe den Fehler überschreitet.

Angular versucht, etwas zu machen, wie:

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