时间戳

首页 > 解决方案 > 检测到循环依赖中的警告：|| 无法确定模块

angular - 检测到循环依赖中的警告：|| 无法确定模块

问题描述

在构建我们的项目时，我们得到一个错误：

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.

我们如何解决这个问题？

标签： angulartypescriptcircular-dependencyng-modules

解决方案

您错误地使用了 main.ts 文件。此文件不打算用作组件。使用 CLI 创建一个新组件ng g c main，手动创建它并命名它main.component.ts。将组件的所有内容移动到这个文件中

推荐阅读