WARNING in Circular dependency detected: || Cannot determine the module

Question

When building our project we get an error:

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 know this error is due to having our MainComponent declared in the app.module.ts, and then calling the AppModule in our MainComponent as we need to use the AppComponent for firebase

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.

How do we resolve this issue?

Answer 1

You are using main.ts file incorrectly. This file is not meant to be used as a component. Create a new component using the CLI ng g c main of creating it manually and naming it main.component.ts . Move all the contents of the component to this file