CODEWITHSUNDEEP
angulartypescript
Addem
Addem

Reputation: 3929

Basic Angular page crashes

My Angular (or TypeScript) code compiles and serves, but when I try to load the page in Firefox it crashes. The code is

app.component.html

<h1>Anguilar</h1>
<dd-button></dd-button>

app.module.ts

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

import { AppComponent } from './app.component';

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

ddButton.component.ts

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

@Component({
  selector: 'dd-button',
  template: "<dd-button>Text</dd-button>"
})
export class DdButtonComponent {
}

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Explaining Modernity';
}

Sorry for the likely noobish issue but since there's no error I'm having a hard time searching for what might be causing the issue. To describe the crash a little more, when I open the page with localhost:4200 it tries to load and hangs for a few seconds before bringing up the "page crashed" page in Firefox.

Upvotes: 0

Views: 1461

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191789

Your dd-button component references itself in the template:

selector: 'dd-button',
template: '<dd-button>Text</dd-button>',

This means that each dd-button attempts to render its own dd-button infinitely. The browser page crashes once your call stack size gets too big.

Most likely you intended to use <button>Text</button>

Upvotes: 2

Related Questions