檢測到循環依賴中的警告：|| 無法確定模塊

Question

在構建我們的項目時，我們得到一個錯誤：

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

我們知道這個錯誤是由於我們在 app.module.ts 中聲明了 MainComponent，然后在 MainComponent 中調用了 AppModule，因為我們需要將 AppComponent 用於 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);

如果我們從 app.module.ts 中刪除 MainComponent 聲明，我們在構建 docker 映像時會出現錯誤：

ERROR in Cannot determine the module for class MainComponent in /src/ClientApp/src/main.ts! Add MainComponent to the NgModule to fix it.

我們如何解決這個問題？

Answer 1

您錯誤地使用了 main.ts 文件。 此文件不打算用作組件。 使用 CLI ng g c main創建一個新組件，手動創建它並將其命名為main.component.ts 。 將組件的所有內容移動到這個文件中