Angular 2 “template” vs “templateUrl” issue

Question

I am building up an app using RouterModule. The problem is that when I use "template" in my Component decoration everything works great, but when I use "templateUrl" instead, the app starts glitching

Console throws: Uncaught (in promise): Error: Error in app/about.component.html:1:30 caused by: Maximum call stack size exceeded

Just don't know what files could be helpful, because it seems like the issue is not there.

Not working properly

   import { Component } from '@angular/core';

     @Component({
        selector: 'about-block',
        templateUrl: 'app/about.component.html'
     })

   export class AboutComponent {}

Working properly

import { Component } from '@angular/core';

    @Component({
       selector: 'about-block',
       template: '<h1>This is About section</h1>'
    })

   export class AboutComponent {}

PS

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'
import { AppComponent }   from './app.component';

import { AppRoutingModule, routingComponents}  from './app.routing';

 @NgModule({
       imports:      [ BrowserModule, AppRoutingModule ],
       declarations: [ AppComponent, routingComponents ],
       bootstrap:    [ AppComponent ]
     })
 export class AppModule { }

about.component.html

   <about-block>

   </about-block>

Answer 1

Remove <about-block></about-block> from about.component.html

Because of your about-block tag in html template, it is going recursive. Hence, you are receiving Maximum call stack size exceeded error.