BrowserModule 已经加载完毕，创建懒加载模块答案

【问题标题】：BrowserModule has already been loaded , create lazy loading moduleBrowserModule 已经加载完毕，创建懒加载模块
【发布时间】：2020-10-24 00:51:27
【问题描述】：

错误是：

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

我在网上搜索了两天，没有得到可行的解决方案：

在 NotificationModule 中添加和删除 BrowserModule 并导入 CommonModule 没用。

在此处查看屏幕截图：https://i.stack.imgur.com/sM9ZS.png

我有两个模块，

应用模块
通知模块

我的目标是：我在 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 { }

非常感谢您的帮助。

【问题讨论】：

标签： angular typescript angular7 angular8 angular-routing

【解决方案1】：

从 NotificationModule 中删除 AppModule。

【讨论】：

我需要 Appmodule 中的 SearchComponent ，以便我导入 app.modules ，任何替代选项？
在你的模块声明中写入组件，你想在哪个模块中使用该组件（SearchComponent）。
感谢@surendra，它导致一个错误，为什么意味着，我们导入两个模块相同的类。
ERROR Error: Uncaught (in promise): Error: Type SearchComponent is part of the declarations of 2 modules: AppModule and NotificationModule! Please consider moving SearchComponent to a higher module that imports AppModule and NotificationModule
只在 app.module 中编写 SearchComponent。

【解决方案2】：

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

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

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

【讨论】：

感谢@Sandor 的宝贵回复，所以我需要创建另一个名为 sharedModule 的模块，这里我们导入 SearchComponet（我需要来自 Appmodule 的 SearchComponent）
谢谢@Sandor，我的问题是实现延迟加载模块，如果我们共享组件，那么我们实现sharedModule，这样问题就来了。

【解决方案3】：

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

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

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

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

【讨论】：