如何解決“BrowserModule 已加載”。 在角

Question

我收到此錯誤“BrowserModule 已加載。如果您需要從延遲加載的模塊訪問常用指令，例如 NgIf 和 NgFor，請改為導入 CommonModule。” 在我的 Angular 網絡應用程序上。 我嘗試通過在每個子模塊上導入 CommonModule 來解決它，並且只在 app.module.ts 上導入一次 BrowserModule 和 BrowserAnimationsModule。 我有三個模塊：一個父 AppModule：

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { LoginComponent } from './components/login/login.component';
import {AuthGuard} from './guards/auth.guard';
import {AuthenticationService} from './services/authentication.service';
import { NavbarComponent } from './components/navbar/navbar.component';
import {AdminGuard} from './guards/admin.guard';
import {AppInterceptor} from './interceptors/app.interceptor';
import {FaIconLibrary, FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {
  faArrowAltCircleDown,
  faArrowDown,
  faArrowRight,
  faArrowUp,
  faCheck,
  faEdit,
  faExchangeAlt, faExclamationCircle, faFileAlt, faHome, faInfo,
  faKey,
  faLock,
  faLockOpen,
  faPlus,
  faSearch,
  faSearchDollar, faSignOutAlt,
  faSort,
  faSortAlphaDown,
  faSortAlphaDownAlt,
  faSortAlphaUp,
  faSortNumericDown,
  faSortNumericDownAlt,
  faSortNumericUp,
  faSyncAlt,
  faTimes,
  faTrash, faUserEdit
} from '@fortawesome/free-solid-svg-icons';
import {BrowserModule} from '@angular/platform-browser';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    NavbarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    FontAwesomeModule,
    AppRoutingModule,
  ],
  providers: [AuthGuard, AuthenticationService, AdminGuard, {
    provide: HTTP_INTERCEPTORS,
    useClass: AppInterceptor,
    multi: true
  }],
  exports: [
    NavbarComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIcons(
      faKey,
      faTrash,
      faLock,
      faLockOpen,
      faSyncAlt,
      faTimes,
      faExchangeAlt,
      faSearch,
      faPlus,
      faArrowRight,
      faCheck,
      faArrowDown,
      faArrowUp,
      faSort,
      faSortAlphaDown,
      faSortNumericDown,
      faSortAlphaUp,
      faSortNumericUp,
      faSortAlphaDownAlt,
      faSortNumericDownAlt,
      faEdit,
      faSearchDollar,
      faFileAlt,
      faHome,
      faUserEdit,
      faSignOutAlt,
      faArrowAltCircleDown,
      faExclamationCircle,
      faInfo
    )
  }
}

還有兩個孩子： LoggedAppModule ：

import { NgModule} from '@angular/core';
import {FontAwesomeModule} from "@fortawesome/angular-fontawesome";
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatSelectModule} from '@angular/material/select';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatTooltipModule} from '@angular/material/tooltip';
import {NgxPaginationModule} from 'ngx-pagination';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {NgMultiSelectDropDownModule} from 'ng-multiselect-dropdown';
import {CompetitorsComponent} from './components/competitors/competitors.component';
import {LoaderComponent} from './components/loader/loader.component';
import {EditPasswordComponent} from './components/edit-password/edit-password.component';
import {CompanyComponent} from './components/company/company.component';
import {LayoutComponent} from './components/layout/layout.component';
import {EditWcKeysComponent} from './components/company/edit-wc-keys/edit-wc-keys.component';
import {CompetitorComponent} from './components/competitor/competitor.component';
import {SafePipe} from './pipe/safe.pipe';
import {ProductsComparisonComponent} from './components/products-comparison/products-comparison.component';
import {ProductComponent} from './components/products/product/product.component';
import {AddCompetitorProductComponent} from './components/add-competitor-product/add-competitor-product.component';
import {BreadcrumbComponent} from './components/breadcrumb/breadcrumb.component';
import {CapitalizePipe} from './pipe/capitalize.pipe';
import {EditPathPriceComponent} from './components/company/edit-path-price/edit-path-price.component';
import {NgbdSortableHeader} from './directives/ngbd-sortable-header';
import {PriceProductHistoryComponent} from './components/partial/price-product-history/price-product-history.component';
import {SettingsComponent} from './components/settings/settings.component';
import {EditPasswordModalComponent} from './components/modal/edit-password-modal/edit-password-modal.component';
import {EditSearchProductCompetitorModalComponent} from './components/modal/edit-search-product-competitor-modal/edit-search-product-competitor-modal.component';
import {HomeComponent} from './components/home/home.component';
import {AppModule} from './app.module';
import {LoggedAppRoutingModule} from './logged-app-routing.module';
import {CommonModule} from '@angular/common';

@NgModule({
    declarations: [
      CompetitorsComponent,
      LoaderComponent,
      EditPasswordComponent,
      CompanyComponent,
      LayoutComponent,
      EditWcKeysComponent,
      CompetitorComponent,
      SafePipe,
      ProductsComparisonComponent,
      ProductComponent,
      AddCompetitorProductComponent,
      BreadcrumbComponent,
      CapitalizePipe,
      EditPathPriceComponent,
      NgbdSortableHeader,
      PriceProductHistoryComponent,
      SettingsComponent,
      EditPasswordModalComponent,
      EditSearchProductCompetitorModalComponent,
      HomeComponent
    ],
  imports: [
    CommonModule,
    AppModule,
    FormsModule,
    ReactiveFormsModule,
    MatSelectModule,
    MatPaginatorModule,
    MatTooltipModule,
    NgxPaginationModule,
    FontAwesomeModule,
    NgbModule,
    NgMultiSelectDropDownModule.forRoot(),
    LoggedAppRoutingModule,
  ],
  exports: [
    LoaderComponent,
    BreadcrumbComponent
  ],
  providers: [
  ]
})
export class LoggedAppModule {
}

管理模塊：

import { NgModule } from '@angular/core';
import {AdminComponent} from "./admin.component";
import {LayoutAdminComponent} from "./layout/layout.admin.component";
import {AdminRoutingModule} from "./admin-routing.module";
import {CompaniesComponent} from './companies/companies.component';
import {AddCompanyComponent} from './add-company/add-company.component';
import {ProductsComponent} from '../products/products.component';
import {LoggedAppModule} from '../../logged-app.module';
import {AdminGuard} from '../../guards/admin.guard';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatTooltipModule} from '@angular/material/tooltip';
import {NgxPaginationModule} from 'ngx-pagination';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {NavbarAdminComponent} from './navbar/navbar.admin.component';
import {CommonModule} from '@angular/common';


@NgModule({
  declarations: [
    AdminComponent,
    LayoutAdminComponent,
    CompaniesComponent,
    AddCompanyComponent,
    ProductsComponent,
    NavbarAdminComponent,
  ],
    imports: [
        CommonModule,
        LoggedAppModule,
        FontAwesomeModule,
        NgxPaginationModule,
        MatTooltipModule,
        FormsModule,
        ReactiveFormsModule,
        AdminRoutingModule,
    ],
  providers: [
    AdminGuard
  ]
})
export class AdminModule { }

我沒有找到任何解決方案。 請幫我

Answer 1

問題正在發生，因為您正在從子模塊“LoggedAppModule”導入“AppModule”

在您的應用程序中，不應導入 App 模塊（假設這是您的應用程序的根模塊）。

子模塊（無論是否延遲加載）都應該導入CommonModule （它與子模塊共享 AppModule 導入）。