[英]ERROR RangeError: Maximum call stack size exceeded [Angular]
I am a complete beginner to Angular and have only been coding for about 2 years or less.我是一个完整的 Angular 初学者,并且只编码了大约 2 年或更短的时间。 I'm building a to-do list app to learn Angular.
我正在构建一个待办事项列表应用程序来学习 Angular。 Currently, I am creating a form (login) and following the documentation.
目前,我正在创建一个表单(登录)并遵循文档。 Unfortunately when I revise app.component.html with the form's HTML, I get ERROR RangeError: Maximum call stack size exceeded.
不幸的是,当我用表单的 HTML 修改 app.component.html 时,我得到 ERROR RangeError: Maximum call stack size exceeded。 Not sure why I am getting this error.
不知道为什么我收到这个错误。 I've searched the forums and the only I possibility I've seen is that maybe I have an infinite loop, although I don't see how that's possible considering that I haven't implemented any loops in the code.
我搜索了论坛,我看到的唯一可能是我可能有一个无限循环,尽管考虑到我没有在代码中实现任何循环,我不知道这是怎么可能的。 I see someone else had this question but it was never answered.
我看到其他人有这个问题,但从未得到回答。 Any help would be greatly appreciated.
任何帮助将不胜感激。
See code below or check my GitHub.请参阅下面的代码或查看我的 GitHub。 https://github.com/bbrawley/TodoListAppAngular/commit/fb06053e889d99be10583d75012031806ede7e04
https://github.com/bbrawley/TodoListAppAngular/commit/fb06053e889d99be10583d75012031806ede7e04
Same question that was never answered - RangeError: Maximum call stack size exceeded ERROR after I tried to use a selector tag in app component ANGULAR 4 & TypeScript同样的问题从未得到回答 - RangeError: Maximum call stack size exceeded ERROR after I try to use a selector tag in app component ANGULAR 4 & TypeScript
user.ts用户.ts
export class User {
constructor(
public username: string,
public password: string
) {
let user = new User('aaa',
'a');
console.log('My username is ' + user.username);
}
}
login-form.component.ts登录-form.component.ts
import { Component, OnInit } from '@angular/core';
import { User } from '../user';
@Component({
selector: 'app-login-form',
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent {
model = new User('Tester1', '12345');
submitted = false;
onSubmit() { this.submitted = true; }
// TODO: Remove this when we're done
get diagnostic() { return JSON.stringify(this.model); }
}
app.module.ts app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { LoginFormComponent } from './login-form/login-form.component';
@NgModule({
declarations: [
AppComponent,
LoginFormComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html应用程序组件.html
<app-login-form></app-login-form>
The code breaks when the line above is entered.输入上面的行时,代码会中断。
The problem is in User
class.问题出在
User
类中。
export class User {
constructor(
public username: string,
public password: string
) {
//this is where user constructor is getting called
let user = new User('aaa', 'a');
console.log('My username is ' + user.username);
}
}
You are basically creating a new instance of User
class inside its own constructor.您基本上是在其自己的构造函数中创建
User
类的新实例。
This causes a cyclic process of calling User
constructor and creating User
instance which ends up crashing the angular app with ERROR RangeError: Maximum call stack size exceeded [Angular]
error!这会导致调用
User
构造函数和创建User
实例的循环过程,最终导致ERROR RangeError: Maximum call stack size exceeded [Angular]
应用程序崩溃并出现ERROR RangeError: Maximum call stack size exceeded [Angular]
错误!
Sample Code
示例代码
class User { constructor() { console.log("constructor called!!"); let a = new User(); } } new User();
It may sound silly but I accidentally was wrapping my component in its own HTML tag.这可能听起来很傻,但我不小心将我的组件包装在它自己的 HTML 标签中。 Which caused the error.
这导致了错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.