CODEWITHSUNDEEP
angulartypescriptangular-cli
Pouya Babaie
Pouya Babaie

Reputation: 79

maximum call stack when importing a module

I have an account modules in my angular application ,

the authentication logic is in the account module , in another module called login module. I want to use the login component in login-dialog component.

when i import the login module to the common module i get maximum call stack error in the terminal / angular cli

I exported the login component in login module ,

import { NgModule } from '@angular/core';
import { AppSharedModule } from '@app/shared/app-shared.module';
import { LoginRoutingModule } from './login-routing.module';
import { LoginComponent } from './login.component';
import { AccountSharedModule } from '@account/shared/account-shared.module';

@NgModule({
    declarations: [LoginComponent],
    imports: [AppSharedModule, AccountSharedModule, LoginRoutingModule],
    exports: [LoginComponent],
})
export class LoginModule {}

and this is the account module , login module parent module.

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { CryptadviserCommonModule } from '@shared/common/common.module';
import { FormsModule } from '@angular/forms';
import { ServiceProxyModule } from '@shared/service-proxies/service-proxy.module';
import { UtilsModule } from '@shared/utils/utils.module';
import { NgxCaptchaModule } from 'ngx-captcha';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AccountRoutingModule } from './account-routing.module';
import { AccountComponent } from './account.component';
import { AccountRouteGuard } from './auth/account-route-guard';
import { LanguageSwitchComponent } from './language-switch.component';

import { TenantRegistrationHelperService } from './register/tenant-registration-helper.service';
import { OAuthModule } from 'angular-oauth2-oidc';
import { PaymentHelperService } from './payment/payment-helper.service';
import { LocaleMappingService } from '@shared/locale-mapping.service';
import { PasswordModule } from 'primeng/password';
import { AppBsModalModule } from '@shared/common/appBsModal/app-bs-modal.module';
import { AccountSharedModule } from '@account/shared/account-shared.module';
import { LoginService } from '@shared/utils/services/login.service';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        HttpClientModule,
        HttpClientJsonpModule,
        NgxCaptchaModule,
        ModalModule.forRoot(),
        CryptadviserCommonModule,
        UtilsModule,
        ServiceProxyModule,
        AccountRoutingModule,
        AccountSharedModule,
    ],
    declarations: [AccountComponent, LanguageSwitchComponent],
    providers: [LoginService, TenantRegistrationHelperService, PaymentHelperService, AccountRouteGuard],
})
export class AccountModule {}

folders are like this.

I need the logic of the login component from login module to be accessible across the application , as i want to use login component selector inside login dialog component.

this is a quick look on what I've done till here.

StackBlitz Sample.

I hope I did a good job explaining my problem , if there was a mistake , inform me to correct it

Upvotes: 0

Views: 360

Answers (1)

ChrisY
ChrisY

Reputation: 1783

I can't tell for sure, but by looking at your LoginModule you probably built a circular dependency. It has imports on AppSharedModule, AccountSharedModule, LoginRoutingModule.

So LoginModule depends on AppSharedModule. When now AppSharedModule depends back on LoginModule you create a dependency circle.

How can you resolve it:

  1. Move the logic of the LoginModule directly into the AppSharedModule or
  2. Move the logic of the AppSharedModule into the LoginModule

Upvotes: 1

Related Questions