时间戳

首页 > 解决方案 > 获取角度延迟加载的浏览器模块错误

javascript - 获取角度延迟加载的浏览器模块错误

问题描述

我正在实现延迟加载，它在该组件中未使用材料的一个组件中运行良好。在其他 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 { }

标签： javascriptangularlazy-loading

解决方案

你能告诉我在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

推荐阅读