Angular 11最大调用堆栈大小超出错误

Posted 2023-03-22

【中文标题】Angular 11最大调用堆栈大小超出错误

【英文标题】：Angular 11 Maximum call stack size exceeded error

【发布时间】：2021-08-15 09:49:35

【问题描述】：

所以我刚遇到这个问题，首先我解决了忘记导入某些模块时的问题。

错误是“错误：超出最大调用堆栈大小”，如标题所示。我尝试将项目导入 StackBlitz，但没有成功。

app.module.ts:

import  NgModule  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  AppRoutingModule  from './app-routing.module';
import  AppComponent  from './app.component';
import  WelcomeComponent  from './before-login/welcome/welcome.component';
import  AboutComponent  from './before-login/about/about.component';
import  ContactComponent  from './before-login/contact/contact.component';
import  NavComponent  from './before-login/nav/nav.component';
import  SigninComponent  from './before-login/signin/signin.component';
import  BrowserAnimationsModule  from '@angular/platform-browser/animations';
import  InputTextModule  from 'primeng/inputtext';
import  InputTextareaModule  from 'primeng/inputtextarea';
import  FormsModule, ReactiveFormsModule  from '@angular/forms';
import  AngularFireModule  from '@angular/fire';
import  AngularFireAuthModule  from '@angular/fire/auth';
import  AngularFirestoreModule  from '@angular/fire/firestore';
import  environment  from '../environments/environment';
import  NgAuthService  from './auth/auth.service';
import  PasswordModule  from 'primeng/password';
import  ToastModule  from 'primeng/toast';
import  ForgotPasswordComponent  from './before-login/forgot-password/forgot-password.component';
import  EmailVerificationComponent  from './before-login/email-verification/email-verification.component';
import  DashboardComponent  from './after-login/dashboard/dashboard.component';
import  SignupComponent  from './before-login/signup/signup.component';
import  LazyLoadImageModule  from 'ng-lazyload-image';
import  UserProfileComponent  from './after-login/user-profile/user-profile.component';
import  MessageModule  from 'primeng/message';
import  HttpClientModule  from '@angular/common/http';
import  ConfirmDialogModule  from 'primeng/confirmdialog';
import  ButtonModule  from 'primeng/button';
import  RippleModule  from 'primeng/ripple';
import  FaerdighederComponent  from './after-login/faerdigheder/faerdigheder.component';
import  EnkeltComponent  from './after-login/faerdigheder/enkelt/enkelt.component';
import  KategoriComponent  from './after-login/faerdigheder/kategori/kategori.component';
import  OpgraderComponent  from './after-login/faerdigheder/opgrader/opgrader.component';
import  SlutsideComponent  from './after-login/faerdigheder/slutside/slutside.component';
import  BeskederComponent  from './after-login/beskeder/beskeder.component';
import  UploadService  from './storage/upload.service';
import  AngularFireStorageModule  from '@angular/fire/storage';


@NgModule(
  declarations: [
    AppComponent,
    WelcomeComponent,
    AboutComponent,
    ContactComponent,
    NavComponent,
    SigninComponent,
    ForgotPasswordComponent,
    EmailVerificationComponent,
    DashboardComponent,
    SignupComponent,
    UserProfileComponent,
    FaerdighederComponent,
    EnkeltComponent,
    KategoriComponent,
    OpgraderComponent,
    SlutsideComponent,
    BeskederComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    InputTextModule,
    InputTextareaModule,
    FormsModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    PasswordModule,
    ToastModule,
    LazyLoadImageModule,
    MessageModule,
    HttpClientModule,
    ConfirmDialogModule,
    ButtonModule,
    RippleModule,
    AngularFireStorageModule
  ],
  providers: [NgAuthService, UploadService],
  bootstrap: [AppComponent]
)
export class AppModule 

用户配置文件.component.ts：

import  Component, OnInit  from '@angular/core';
import  UploadService  from '../../storage/upload.service';

@Component(
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.scss']
)
export class UserProfileComponent implements OnInit 
  constructor(private uploadService: UploadService)  

  image = this.uploadService.url;

  ngOnInit(): void 
  

app-routing.module.ts

import  NgModule  from '@angular/core';
import  RouterModule, Routes, PreloadAllModules  from '@angular/router';
import  AboutComponent  from './before-login/about/about.component';
import  ContactComponent  from './before-login/contact/contact.component';
import  SigninComponent  from './before-login/signin/signin.component';
import  SignupComponent  from './before-login/signup/signup.component';
import  WelcomeComponent  from './before-login/welcome/welcome.component';
import  AuthGuard  from './auth/auth.guard';
import  ForgotPasswordComponent  from './before-login/forgot-password/forgot-password.component';
import  EmailVerificationComponent  from './before-login/email-verification/email-verification.component';
import  DashboardComponent  from './after-login/dashboard/dashboard.component';
import  UserProfileComponent  from './after-login/user-profile/user-profile.component';


const routes: Routes = [
  
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  ,
  
    path: 'about',
    component: AboutComponent
  ,
  
    path: 'home',
    component: WelcomeComponent
  ,
  
    path: 'contact',
    component: ContactComponent
  ,
  
    path: 'signin',
    component: SigninComponent
  ,
  
    path: 'signup',
    component: SignupComponent
  ,
  
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]
  ,
  
    path: 'forgot-password',
    component: ForgotPasswordComponent
  ,
  
    path: 'email-verification',
    component: EmailVerificationComponent
  ,
  
    path: 'user-profile',
    component: UserProfileComponent
  
];

@NgModule(
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
)
export class AppRoutingModule  

上传.service.ts

import  Injectable  from '@angular/core';
import  AngularFireStorage  from '@angular/fire/storage';
import firebase from 'firebase/app';
import  User  from '../auth/auth.service';

@Injectable(
  providedIn: 'root',
)
export class UploadService 
  constructor(private afStorage: AngularFireStorage, private user: User)  
  iUser = this.user.uid;
  private basePath = `/uploads/images/$this.iUser`;
  file: File;
  url = '';

  //method to upload file at firebase storage
  async uploadFile(event) 
    this.file = event.target.files[0];
    if (this.file) 
      const filePath = `$this.basePath/$this.file.name`;    //path at which image will be stored in the firebase storage
      const snap = await this.afStorage.upload(filePath, this.file);    //upload task
      this.getUrl(snap);
     else alert('Please select an image'); 
  

  //method to retrieve download url
  private async getUrl(snap: firebase.storage.UploadTaskSnapshot) 
    const url = await snap.ref.getDownloadURL();
    this.url = url;  //store the URL
    console.log(this.url);
  

我不知道问题可能出在哪里。我已经查看并更改了一些内容，但由于我认为问题似乎没有解决，所以改回原来的内容。

【问题讨论】：

这能回答你的问题吗？ Maximum call stack size exceeded error

@Giannis 不。我通读了一遍，但仍然不知道。我只是删除了一些东西并评论了一些东西。依然没有。我评论了image = this.uploadService.url;。看看这是否是问题所在，但不是。

您的代码中可能存在循环模块依赖，A 导入 B，导入 A。

@MikkelChristensen 我在两个地方导入UploadService。 app.module.ts 和 user-profile.component.ts

我还需要导入到 app.module.ts 中，因为我需要将其指定为提供程序。否则我会得到 Error: Error: Internal error: unknown identifier [] 作为错误。

【参考方案1】：

我似乎找到了我的问题。我决定更新到 Angular 12，Ivy 编译器告诉我，我必须在 upload.service.ts 文件的构造函数上使用 @Inject。