CODEWITHSUNDEEP
angular
Sebas
Sebas

Reputation: 71

Circular dependency detected, i can't see it

I'm having a circular dependency warn in my console, but can't resolve it, i know what it is but i'm trying to solve it, but it's useless.

inicio.component.ts

    import { Component } from '@angular/core';
import { searchClient } from '../../app.module';



@Component({
  selector: 'app-inicio',
  templateUrl: './inicio.component.html',
  styleUrls: ['./inicio.component.css']
})



export class InicioComponent {

  config = {
    indexName: 'items',
    searchClient
  };

  constructor() { 

  }



}

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule, MatIconModule, MatSidenavModule, MatListModule, MatButtonModule } from  '@angular/material';

import algoliasearch from 'algoliasearch';

import { AngularFireModule } from "@angular/fire";
import { AngularFireAuthModule } from "@angular/fire/auth";
import { AngularFirestoreModule } from "@angular/fire/firestore";

import { NgAisModule } from 'angular-instantsearch';

import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
import { VerifyEmailComponent } from './components/verify-email/verify-email.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LoginRegisterComponent } from './components/login-register/login-register.component';
import { InicioComponent } from './components/inicio/inicio.component';
import { UserProfileComponent } from './components/user-profile/user-profile.component';
import { PostItemComponent } from './components/post-item/post-item.component';
import { InboxComponent } from './components/inbox/inbox.component';
import { SendMsgComponent } from './components/send-msg/send-msg.component';

export const searchClient = algoliasearch(
  'hgjhg',
  'ahgjghj'
);


const routes: Routes= [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: InicioComponent},
  { path: 'post-item', component: PostItemComponent},
  { path: 'send-msg', component: SendMsgComponent},
  { path: 'forgot-password', component:  ForgotPasswordComponent },
  { path: 'verify-email', component:  VerifyEmailComponent },
  { path: 'login-register', component:  LoginRegisterComponent },
  { path: 'user-profile', component:  UserProfileComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    InicioComponent,
    UserProfileComponent,
    NavbarComponent,
    ForgotPasswordComponent,
    VerifyEmailComponent,
    LoginRegisterComponent,
    PostItemComponent,
    InboxComponent,
    SendMsgComponent
  ],
  imports: [
    RouterModule.forRoot(routes),
    NgAisModule.forRoot(),
    AngularFireModule.initializeApp(config),
    AngularFirestoreModule,
    ReactiveFormsModule,
    AngularFireAuthModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,
    MatButtonModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The problem is with this 2 files, obviously it's with the algoliasearch export to inicio.component.ts and the import from the component to app.module.ts to declare it, but how do i solve the warn? i've tryed many different ways.

Upvotes: 2

Views: 942

Answers (2)

Steve
Steve

Reputation: 1943

Move the searchClient out of the module and into it's own file.

App.module tries to load InicioComponent, which in turn tries to load the app.module, which tries to load Inicion... repeat forever.

Upvotes: 1

satanTime
satanTime

Reputation: 13539

The problem is in searchClient, move it to the file with InicioComponent, or to a separate file and import it in InicioComponent and in AppModule.

Upvotes: 2

Related Questions