[英]How to solve "BrowserModule has already been loaded." on Angular
I have this error "BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead."我收到此错误“BrowserModule 已加载。如果您需要从延迟加载的模块访问常用指令,例如 NgIf 和 NgFor,请改为导入 CommonModule。” on my Angular web app.在我的 Angular 网络应用程序上。 I try to solve it with in importing CommonModule on each child modules, and import only once BrowserModule and BrowserAnimationsModule on app.module.ts.我尝试通过在每个子模块上导入 CommonModule 来解决它,并且只在 app.module.ts 上导入一次 BrowserModule 和 BrowserAnimationsModule。 I have three modules : one parent AppModule :我有三个模块:一个父 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
)
}
}
And two childs : LoggedAppModule :还有两个孩子: 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 {
}
AdminModule :管理模块:
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 { }
I don't find any solution.我没有找到任何解决方案。 Please help me请帮我
The problem is happening because you are importing the "AppModule" from your child module "LoggedAppModule"问题正在发生,因为您正在从子模块“LoggedAppModule”导入“AppModule”
In your app, nothing should import the App module (assuming this is the root module of your app).在您的应用程序中,不应导入 App 模块(假设这是您的应用程序的根模块)。
The child modules (lazzy-loaded or not) should import the CommonModule (which shares the AppModule imports to the child modules).子模块(无论是否延迟加载)都应该导入CommonModule (它与子模块共享 AppModule 导入)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.