Получение ошибки модуля браузера при отложенной загрузке в angular - PullRequest
Новая
       7

Получение ошибки модуля браузера при отложенной загрузке в angular

0 голосов
/ 11 марта 2020

Я реализую ленивую загрузку, она работает нормально в одном компоненте, где материал не используется в этом компоненте. В других HTML я использовал angular материал, поэтому я импортирую модуль 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 { }

До карточекКомпонент, все работает нормально, когда мне требуется angular материал в карточке. получение ошибки модуля браузера. Любое решение, пожалуйста

angular материал модуля 

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

Ответы [ 2 ]

0 голосов
/ 13 марта 2020

Я бы предложил пересмотреть ваши модули Imports / Exports. Например, ошибка говорит:

BrowserModule уже загружен. Если вам нужен доступ к общим директивам, таким как NgIf и NgFor, из лениво загруженного модуля, вместо этого импортируйте CommonModule.

Однако в вашем AppModule вы импортируете CommonModule и BrowserModule - я не уверен на 100%, но Я думаю, что вам нужно импортировать BrowserModule один раз в AppModule, и использовать CommonModule только в других импортах модулей. Таким образом, вы, вероятно, можете удалить CommonModule из AppModule. 

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? если вы хотите предоставить CommonModule другим модулям с SharedModule, вам не нужно импортировать CommonModule вместе с SharedModule, как вы делаете это в вашем CardsModule ... 

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 это может показать некоторые ошибки

Альтернативно опубликовать все Ваши модули (включая модули маршрутизации) здесь, чтобы мы могли просмотреть их.

0 голосов
/ 12 марта 2020

Можете ли вы показать мне, что импортируется в AngularMaterialModule файл?

Я предполагаю, что AngularMaterialModule снова импортирует BrowserModule (возможно, BrowserAnimationsModule тоже): 

import { BrowserModule } from "@angular/platform-browser"; // SHOULD NOT BE IMPORTED AGAIN

Ошибка не появляется перед отложенной загрузкой, потому что дублированный импорт игнорируется в загруженных модулях. Вот почему ваш SharedModule может быть загружен в ваш AppModule без выдачи ошибки.

Если мое предположение верно, вам необходимо удалить ошибочные импорт (ы) в AngularMaterialModule.

EDIT :

Если AngularMaterialModule не является виновником, вам следует проверить, импортирует ли какой-либо из ваших импортированных модулей один из следующих модулей:

BrowserModule, BrowserAnimationsModule, HttpModule или HttpClientModule

источник: { ссылка }

И если вы не можете найти какой-либо дефектный импорт, вы все равно можете попробовать это странное предложение: https://github.com/angular/angular-cli/issues/5684#issuecomment -349821403

...