为角度加载延迟加载而出现浏览器模块错误

问题描述 投票：0回答：2

我正在实现延迟加载，它在一个组件中工作正常，而该组件中未使用该材料。在其他HTML中，我使用了角形材料，因此我将angularmaterial模块导入到共享模块中，当时我遇到了以下错误

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.

app.module.ts

import { NgModule, ApplicationModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgHttpLoaderModule } from 'ng-http-loader';
import { MatInputModule, MatFormFieldModule,  } from '@angular/material';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgSelectModule } from '@ng-select/ng-select';

import { SharedModule } from './_shared/shared.module';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
   CommonModule,
    BrowserModule,
     BrowserAnimationsModule,
    ApplicationModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule,
    NgHttpLoaderModule.forRoot(),
    NgbModule,
    SharedModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在sharedModule中：

import { NgModule } from '@angular/core';

import { ChartModule } from 'angular-highcharts';
import { DaterangepickerModule } from 'angular-2-daterangepicker';
import { FilterDataPipe } from '../_pipes/filter-data.pipe';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { NgxDatetimeRangePickerModule } from 'ngx-datetime-range-picker';
import { AngularMaterialModule } from '../angular-material.module';
import { CommonModule } from '@angular/common';

@NgModule({
  imports:[

    DaterangepickerModule,
    ChartModule,
    NgMultiSelectDropDownModule,
    NgxDatetimeRangePickerModule,
    AngularMaterialModule,
  ],
  declarations: [
    FilterDataPipe,
  ],
  exports: [
    CommonModule,
    DaterangepickerModule,
    FilterDataPipe,
    NgMultiSelectDropDownModule,
    NgxDatetimeRangePickerModule,
     AngularMaterialModule
  ]
})
export class SharedModule {}

在我的卡片模块中：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Cardscomponent } from './cards.component';
import { SharedModule } from '../_shared/shared.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CardsRoutingModule } from './cards-routing.module';
import { CardDetailsComponent } from './card-details/card-details.component';

@NgModule({
  imports: [
   CommonModule,
    SharedModule,
    FormsModule,
    ReactiveFormsModule,
    CardsRoutingModule,
    NgbModule

  ],
  declarations: [Cardscomponent,CardDetailsComponent]
})
export class CardsModule { }

直到cardsComponent，当我在carddetailscomponent中需要角形材料时，它工作正常，我得到浏览器模块错误。任何解决方案，请

角形材料模块

import { NgModule } from '@angular/core';
import {CdkTableModule} from '@angular/cdk/table';
import { CommonModule } from '@angular/common';

import {
  MatCardModule,
  MatSidenavModule,
  MatButtonModule,
  MatToolbarModule,
  MatListModule,
  MatIconModule,
  MatMenuModule,
  MatDatepickerModule,
  MatTabsModule,
  MatFormFieldModule,
  MatSnackBarModule,
  MatInputModule,
  MatChipsModule,
  MatCheckboxModule,
  MatSortModule,
  MatStepperModule,
  MatSelectModule,
  MatSlideToggleModule,
  MatTableModule,
  MatExpansionModule,
  MatTooltipModule,
  MatButtonToggleModule,
  MatProgressSpinnerModule,
  MatDialogModule,
  MatRippleModule,
  MatRadioModule
} from '@angular/material';

@NgModule({
  declarations: [],
  imports: [
    MatRadioModule,
    //CommonModule,
    MatCardModule,
    MatSidenavModule,
    MatButtonModule,
    MatToolbarModule,
    MatListModule,
    MatIconModule,
    MatMenuModule,
    MatDatepickerModule,
    MatTabsModule,
    MatFormFieldModule,
    MatSnackBarModule,
    MatInputModule,
    MatChipsModule,
    MatCheckboxModule,
    MatSortModule,
    MatStepperModule,
    MatSelectModule,
    MatSlideToggleModule,
    MatTableModule,
    MatExpansionModule,
    MatTooltipModule,
    MatButtonToggleModule,
    MatProgressSpinnerModule,
    MatDialogModule,
    MatRippleModule,
    CdkTableModule
  ],
  exports: [
   // CommonModule,
    MatRadioModule,
    MatCardModule,
    MatSidenavModule,
    MatButtonModule,
    MatToolbarModule,
    MatListModule,
    MatIconModule,
    MatMenuModule,
    MatDatepickerModule,
    MatTabsModule,
    MatFormFieldModule,
    MatSnackBarModule,
    MatInputModule,
    MatChipsModule,
    MatCheckboxModule,
    MatSortModule,
    MatStepperModule,
    MatSelectModule,
    MatSlideToggleModule,
    MatTableModule,
    MatExpansionModule,
    MatTooltipModule,
    MatButtonToggleModule,
    MatProgressSpinnerModule,
    MatDialogModule,
    MatRippleModule,
    CdkTableModule
  ]
})
export class AngularMaterialModule { }
javascript angular lazy-loading
2个回答
0
投票

您能告诉我AngularMaterialModule文件中导入了什么吗？

我的猜测是AngularMaterialModule再次导入了[[BrowserModule（也许也是BrowserAnimationsModule）：

import { BrowserModule } from "@angular/platform-browser"; // SHOULD NOT BE IMPORTED AGAIN 
错误不会在延迟加载之前显示，因为在急切加载的模块中，重复的导入将被忽略。这就是为什么可以将SharedModule加载到AppModule中而不会引发错误的原因。
如果我的猜测是正确的，则需要删除AngularMaterialModule中错误的导入。
编辑：
如果AngularMaterialModule不是罪魁祸首，则应检查是否有任何导入的模块导入以下模块之一：

BrowserModule，BrowserAnimationsModule，HttpModule或HttpClientModule

来源：https://stackoverflow.com/a/45979219/10428517

并且如果找不到任何错误的导入，您仍然可以尝试以下奇怪的建议：https://github.com/angular/angular-cli/issues/5684#issuecomment-349821403

0
投票
我建议您查看模块的导入/导出。例如，错误显示为：

BrowserModule已加载。如果您需要访问通用延迟加载模块中的NgIf和NgFor等指令改为使用CommonModule。

但是在AppModule中，您导入CommonModule和BrowserModule-我不确定100％，但是我认为您需要在AppModule中一次导入BrowserModule，并且仅在其他Modules导入中使用CommonModule。因此，您可能可以从AppModule中删除CommonModule。

import { NgModule, ApplicationModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgHttpLoaderModule } from 'ng-http-loader'; import { MatInputModule, MatFormFieldModule, } from '@angular/material'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { NgSelectModule } from '@ng-select/ng-select'; import { SharedModule } from './_shared/shared.module'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; @NgModule({ declarations: [ AppComponent, ], imports: [ CommonModule, BrowserModule, BrowserAnimationsModule, ApplicationModule, FormsModule, ReactiveFormsModule, AppRoutingModule, HttpClientModule, NgHttpLoaderModule.forRoot(), NgbModule, SharedModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

我也可以看到，在您的SharedModule中，您导出CommonModule而不导入它，但是我认为您在发布此问题之前已经删除了此模块。但是还有另一个问题，您的SharedModule没有任何声明，所以为什么呢？需要CommonModule吗？如果您想通过SharedModule向其他模块提供CommonModule，则不需要像在CardsModule中那样将CommonModule与SharedModule一起导入。
import { NgModule } from '@angular/core';

import { ChartModule } from 'angular-highcharts';
import { DaterangepickerModule } from 'angular-2-daterangepicker';
import { FilterDataPipe } from '../_pipes/filter-data.pipe';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { NgxDatetimeRangePickerModule } from 'ngx-datetime-range-picker';
import { AngularMaterialModule } from '../angular-material.module';
import { CommonModule } from '@angular/common';

@NgModule({
  imports:[

    DaterangepickerModule,
    ChartModule,
    NgMultiSelectDropDownModule,
    NgxDatetimeRangePickerModule,
    AngularMaterialModule,
  ],
  declarations: [
    FilterDataPipe,
  ],
  exports: [
    CommonModule,
    DaterangepickerModule,
    FilterDataPipe,
    NgMultiSelectDropDownModule,
    NgxDatetimeRangePickerModule,
     AngularMaterialModule
  ]
})
export class SharedModule {}

要发现错误，最好检查所有模块，并检查重复的位置和可能的小塌陷。 
也尝试执行
ng build
和ng build --prod可能会显示一些错误或者在这里发布您的所有模块（包括路由模块），以便我们进行检查=
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.