BrowserModule 已经加载,创建懒加载模块
BrowserModule has already been loaded , create lazy loading module
错误是:
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.
at new BrowserModule
我在网上搜索了两天,没有得到可行的解决方案:
添加和删除 BrowserModule 并在 NotificationModule 中导入 CommonModule 没有用.
此处查看屏幕截图:https://i.stack.imgur.com/sM9ZS.png
我有两个模块,
- AppModule
- 通知模块
我的目标是:我在 app.module 中有 SearchComponent,我需要进入 notification.module。
在 AppModule 中我定义:
imports: [
BrowserAnimationsModule,
HttpClientModule,
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
NgxSpinnerModule,
NgSelectModule,
CalendarModule,
PopoverModule.forRoot(),
TabsModule.forRoot(),
TooltipModule.forRoot(),
AccordionModule.forRoot(),
NgxUsefulSwiperModule,
PickerModule,
NgxFileDropModule,
NgxMaterialTimepickerModule,
PlyrModule,
NgbModule,
SocketIoModule.forRoot(config),
ContenteditableModule,
ScrollEventModule,
NgxStarsModule,
NgImageSliderModule,
NgxImageZoomModule.forRoot(),
ProgressBarModule,
InfiniteScrollModule,
ColorPickerModule,
NgxBraintreeModule,
QRCodeModule
],
exports: [
SearchComponent ,
],
路由应用模块:
{
path: 'Notification',
loadChildren: () => import('./notification/notification.module').then(m => m.NotificationModule)
},
和我的 NotificationModule :我在这里导入 app.module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppModule } from '../app.module';
import { NotificationRoutingModule } from './notification-routing.module';
import { ListComponent } from './list/list.component';
@NgModule({
declarations: [
ListComponent
],
imports: [
CommonModule ,
AppModule ,
NotificationRoutingModule
]
})
export class NotificationModule { }
路由通知模块是:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListComponent } from './list/list.component';
const routes: Routes = [
{
path: 'List',
component: ListComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class NotificationRoutingModule { }
非常感谢您的帮助。
从 NotificationModule 中删除 AppModule。
您收到错误的原因是您在通知模块中再次导入了 App 模块。
@NgModule({
declarations: [
ListComponent
],
imports: [
CommonModule ,
AppModule ,// remove this line.
NotificationRoutingModule
]
})
export class NotificationModule { }
如果 appmodule 中需要某些东西,则将其提取到一个单独的共享模块并导入该模块。
在我的例子中,我们使用的是 NgxGalleryModule (https://www.npmjs.com/package/@kolkov/ngx-gallery)。我们在导入它的延迟加载模块中收到 BrowserModule 错误。
我们通过执行以下步骤修复了它:
- 我们从 app.module.ts 中删除了 BrowserModule,因为我们导入的 BrowerAnimationsModule 已经导出 BrowserModule
- 我们使用 npm i @angular/platform-browser
更新了 Platform Browser 包
- 我们将 Ngx Gallery 回滚到旧的 1.2.3 版本,因为最新版本仍然显示 BrowserModule 错误
- 我们确保 BrowerAnimationsModule 仅在 app.module.ts
这修正了错误!我希望它能帮助别人。更新平台浏览器是关键步骤。
错误是:
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.
at new BrowserModule
我在网上搜索了两天,没有得到可行的解决方案:
添加和删除 BrowserModule 并在 NotificationModule 中导入 CommonModule 没有用.
此处查看屏幕截图:https://i.stack.imgur.com/sM9ZS.png
我有两个模块,
- AppModule
- 通知模块
我的目标是:我在 app.module 中有 SearchComponent,我需要进入 notification.module。
在 AppModule 中我定义:
imports: [
BrowserAnimationsModule,
HttpClientModule,
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
NgxSpinnerModule,
NgSelectModule,
CalendarModule,
PopoverModule.forRoot(),
TabsModule.forRoot(),
TooltipModule.forRoot(),
AccordionModule.forRoot(),
NgxUsefulSwiperModule,
PickerModule,
NgxFileDropModule,
NgxMaterialTimepickerModule,
PlyrModule,
NgbModule,
SocketIoModule.forRoot(config),
ContenteditableModule,
ScrollEventModule,
NgxStarsModule,
NgImageSliderModule,
NgxImageZoomModule.forRoot(),
ProgressBarModule,
InfiniteScrollModule,
ColorPickerModule,
NgxBraintreeModule,
QRCodeModule
],
exports: [
SearchComponent ,
],
路由应用模块:
{
path: 'Notification',
loadChildren: () => import('./notification/notification.module').then(m => m.NotificationModule)
},
和我的 NotificationModule :我在这里导入 app.module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppModule } from '../app.module';
import { NotificationRoutingModule } from './notification-routing.module';
import { ListComponent } from './list/list.component';
@NgModule({
declarations: [
ListComponent
],
imports: [
CommonModule ,
AppModule ,
NotificationRoutingModule
]
})
export class NotificationModule { }
路由通知模块是:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListComponent } from './list/list.component';
const routes: Routes = [
{
path: 'List',
component: ListComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class NotificationRoutingModule { }
非常感谢您的帮助。
从 NotificationModule 中删除 AppModule。
您收到错误的原因是您在通知模块中再次导入了 App 模块。
@NgModule({
declarations: [
ListComponent
],
imports: [
CommonModule ,
AppModule ,// remove this line.
NotificationRoutingModule
]
})
export class NotificationModule { }
如果 appmodule 中需要某些东西,则将其提取到一个单独的共享模块并导入该模块。
在我的例子中,我们使用的是 NgxGalleryModule (https://www.npmjs.com/package/@kolkov/ngx-gallery)。我们在导入它的延迟加载模块中收到 BrowserModule 错误。
我们通过执行以下步骤修复了它:
- 我们从 app.module.ts 中删除了 BrowserModule,因为我们导入的 BrowerAnimationsModule 已经导出 BrowserModule
- 我们使用 npm i @angular/platform-browser 更新了 Platform Browser 包
- 我们将 Ngx Gallery 回滚到旧的 1.2.3 版本,因为最新版本仍然显示 BrowserModule 错误
- 我们确保 BrowerAnimationsModule 仅在 app.module.ts
这修正了错误!我希望它能帮助别人。更新平台浏览器是关键步骤。