正在获取以角度加载的浏览器模块错误

Question

我正在实现lazyloading，它在一个组件中运行良好，而该组件中没有使用材料。在其他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 { }

在共享模块中：

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

Answer 1

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

我的猜测是AngularMaterialModule正在再次导入BrowserModule

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

Answer 2

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

浏览器模块已经加载。如果您需要访问公共来自延迟加载模块的指令，如NgIf和NgFor，导入取而代之的是CommonModule。

然而，在你的AppModule中，你导入了CommonModule和BrowserModule-我不能100%确定，但我认为你需要在AppModule中导入BrowserModule一次，并且只在其他模块导入中使用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可能会显示一些错误

或者将您的所有模块(包括路由模块(张贴在此处，以便我们可以查看它们。