During the development of our project, we encountered an issue:
fail: Microsoft.AspNetCore.SpaServices[0]
WARNING in Circular dependency detected:
fail: Microsoft.AspNetCore.SpaServices[0]
src\app\app.module.ts -> src\main.ts -> src\app\app.module.ts
We have identified that this error is caused by declaring MainComponent in app.module.ts and then referencing the AppModule in MainComponent to utilize the AppComponent for firebase integration
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { MatIconModule } from '@angular/material/icon';
import { MatGridListModule } from '@angular/material';
import { MatStepperModule } from '@angular/material/stepper';
import { MatButtonModule } from '@angular/material/button';
import { MainComponent } from 'src/main';
import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { AdminNavMenuComponent } from './admin-nav-menu/admin-nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { ReservationsComponent } from './reservations/reservations.component';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import {MatDatepickerModule} from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { AdminComponent } from './admin/admin.component';
import { fromEventPattern } from 'rxjs';
@NgModule({
declarations: [
MainComponent,
AppComponent,
NavMenuComponent,
AdminNavMenuComponent,
HomeComponent,
CounterComponent,
FetchDataComponent,
ReservationsComponent,
AdminComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
MatIconModule,
MatGridListModule,
MatStepperModule,
MatButtonModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: 'reservations', component: ReservationsComponent },
{ path: 'admin', component: AdminComponent }
]),
NoopAnimationsModule,
MatDatepickerModule,
MatInputModule,
MatNativeDateModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
main.ts
import { Component, OnInit, enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment, firebaseConfig } from './environments/environment';
import firebase from "firebase/app" //importing main functionality
var currentPage = [];
@Component({
selector: 'app-root',
templateUrl: './index.html',
styleUrls: ['./styles.css']
})
export class MainComponent implements OnInit{
adminCssUrl: string;
constructor(){
//console.log(this.router.url);
}
ngOnInit(){
currentPage[0] = window.location.href;
this.adminCssUrl = './styles_admin.css';
}
}
export function getBaseUrl() {
return document.getElementsByTagName('base')[0].href;
}
const providers = [
{ provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic(providers).bootstrapModule(AppModule)
.catch(err => console.log(err));
firebase.initializeApp(firebaseConfig);
If we remove the MainComponent declaration from app.module.ts we get an error when building our docker image:
ERROR in Cannot determine the module for class MainComponent in /src/ClientApp/src/main.ts! Add MainComponent to the NgModule to fix it.
What steps can we take to address this issue?