So I just got this problem, first I solved an issue when I forgot to import certain modules.
Error is "Error: Maximum call stack size exceeded" as title also says. I've tried importing the project into StackBlitz but no luck.
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 {
}
user-profile.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 { }
upload.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);
}
}
I have no idea, as to where the problem could be. I've looked and changed a few things but changed back to original as the stuff I thought was the problem didn't seem to fix it.
