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

兩天我在互聯網上搜索，沒有得到可行的解決方案：

在 NotificationModule 中添加和刪除 BrowserModule 並導入 CommonModule 沒用。

在這里查看屏幕截圖： https://i.stack.imgur.com/sM9ZS.png

我有兩個模塊，

1. 應用模塊
2. 通知模塊

我的目標是：我在 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 錯誤。

我們通過執行以下步驟來修復它：

1. 我們從 app.module.ts 中刪除了 BrowserModule，因為我們正在導入已經導出 BrowserModule 的 BrowerAnimationsModule
2. 我們使用 npm i @angular/platform-browser 更新了平台瀏覽器 package
3. 我們將 Ngx Gallery 回滾到較舊的 1.2.3 版本，因為最新版本仍然顯示 BrowserModule 錯誤
4. 我們確保 BrowerAnimationsModule 僅在 app.module.ts 中

這修復了錯誤。 我希望它可以幫助某人。 更新平台瀏覽器是關鍵步驟。