Angular2 RC5 infinite loop with templateUrl

Question

I have a problem with Angular2 RC5.

My app.component (which is bootstrapped by the app.module) looks like this, very basic:

@Component({
    selector: 'my-app',
    template: `TEST`
})

export class AppComponent implements OnInit {

    constructor() {
        console.log("APP LOG!");
    }

    ngOnInit() {
        console.log("APP INIT LOG!");
    }

}

As long as I code the template inside the component it works fine. But when I transfer it into its own html file and include it via

templateUrl: 'app.component.html'

I run into an infinite loop. The constructor is called over and over again, never reaching the ngOnInit. No difference whether I try relative or absolute path. Didnt't have this issue on RC4 without ngModules.

The corresponding ngModule, also very basic:

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

I use Meteor, so everything is compiled using the Meteor angular2-compiler.

Any hints are highly appreciated!

that app.component.html is located next to that app.component.ts? if you place the templateUrl: 'app.component.html' into the decorator, the template: '' was removed, right? :) — slaesh

slaesh slaesh · Accepted Answer · 2016-08-31T17:33:07

I dont know that Meteor compiler, but taking a look at the documentation: https://www.angular-meteor.com/tutorials/socially/angular2/dynamic-template

Example-Code: https://github.com/Urigo/meteor-angular2.0-socially/archive/step_01.zip

Tells us to use it like this:

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

import template from './app.component.html';

@Component({
  selector: 'app',
  template
})
export class AppComponent {}

Angular2 RC5 infinite loop with templateUrl

1 Answers