BrowserModule 已经加载，创建懒加载模块

Question

错误是：

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 { }

非常感谢您的帮助。

Answer 1

从 NotificationModule 中删除 AppModule。

Answer 2

您收到错误的原因是您在通知模块中再次导入了 App 模块。

@NgModule({
  declarations: [
        ListComponent
    ],
  imports: [
    CommonModule ,
    AppModule ,// remove this line.
    NotificationRoutingModule
  ]
})
export class NotificationModule { }

如果 appmodule 中需要某些东西，则将其提取到一个单独的共享模块并导入该模块。

Answer 3

在我的例子中，我们使用的是 NgxGalleryModule (https://www.npmjs.com/package/@kolkov/ngx-gallery)。我们在导入它的延迟加载模块中收到 BrowserModule 错误。

我们通过执行以下步骤修复了它：

我们从 app.module.ts 中删除了 BrowserModule，因为我们导入的 BrowerAnimationsModule 已经导出 BrowserModule
我们使用 npm i @angular/platform-browser
我们将 Ngx Gallery 回滚到旧的 1.2.3 版本，因为最新版本仍然显示 BrowserModule 错误
我们确保 BrowerAnimationsModule 仅在 app.module.ts

这修正了错误！我希望它能帮助别人。更新平台浏览器是关键步骤。

BrowserModule 已经加载，创建懒加载模块

BrowserModule has already been loaded , create lazy loading module

angular

typescript

angular7

angular8

angular-routing