尽管未将浏览器模块导入延迟加载的模块中,但已将其加载

时间:2018-10-17 17:27:30

标签: angular angular5 lazy-loading

尽管已采取措施将其删除,但仍收到以下错误。有人可以告诉我我在这里想念什么吗?

错误:

ERROR Error: Uncaught (in promise): 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.

以下是我的模块:

应用程序模块:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from 
    '@angular/core';
    import { HttpClientModule } from '@angular/common/http';
import { enableProdLogger } from '@cst/cst-components/cst-service';

// Enums
import { environment } from '../environments/environment';
// App components
import { AppComponent } from './app.component';
// Header navbar
import { HeaderNavbarComponent } from './header-navbar/header-navbar.component';

// Home components
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';

// Pipes
import { PipesModule } from './core/pipes';
// App routings
import { AppRoutingModule } from './app-routing.module';
//rwa modules
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { TimeoutModule } from './timeout';
import { CustomerHoldingsModule } from './customer-holding/customer-holding.module';
import { ProductAdminModule } from './product-admin/product-admin.module';
import { StaffModule } from './staff/staff.module';
import { CstModule } from '@cst/cst-components';
import { OAuthModule } from 'angular-oauth2-oidc';

if (environment.production === true) {
  enableProdLogger();
}

@NgModule({
  declarations: [
    AppComponent,
    HeaderNavbarComponent,

    // Home components
    HomeComponent,
    DashboardComponent,

  ],
  imports: [
    CstModule.forRoot(),
    OAuthModule.forRoot(),
    BrowserModule,
    HttpClientModule,
    PipesModule,
    TimeoutModule,

    //routing module
    AppRoutingModule,

    //rwa modules
    CoreModule,
    SharedModule,
    CustomerHoldingsModule,
    ProductAdminModule,
    StaffModule,
    CstModule
  ],
  providers: [

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

共享模块

import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { CommonModule } from "@angular/common";
import { UtilityService } from "./utility-service.service";
import { CstModule } from "@cst/cst-components";
import { RouterModule } from "@angular/router";

@NgModule({
    declarations: [
    ],
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        CstModule,
        RouterModule
    ],
    providers: [
        UtilityService
    ],
    exports: [
         FormsModule, ReactiveFormsModule, CstModule, RouterModule
    ]
})

export class SharedModule {

}

核心模块

import { NgModule, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from "@angular/core";
import { PageNotFoundComponent } from "../statics/page-not-found.component";
import { HelpMePageComponent } from "../statics/help-me.component";
import { CstShowDirective } from "./directives/cst-show.directive";
import { CstModule } from "@cst/cst-components";
import { OAuthModule } from "angular-oauth2-oidc";
import { Options, Logger, AutoSaveFactory, localStorageProvider } from "@cst/cst-components/cst-service";
import { ZoneService } from "./providers/zone.service";
import { CstWindow } from "./providers/window.service";
import { LOGIN_GUARD_PROVIDER } from "./providers/logged-in-guard";
import { DEFAULT_INTERCEPTOR } from "./providers/custom.http.provider";
import { VCardService } from "./providers/vcard.service";
import { TimeoutService } from "../timeout/timeout.service";
import { AppConfigService, startupServiceFactory } from "./providers/app-config.service";
import { BasicLoginComponent } from "./login-basic/basic-login.component";
import { BasicLoginService } from "./login-basic/login.service";
import { CommonModule } from "@angular/common";

@NgModule({
    declarations: [
        // Login components
        BasicLoginComponent,
        // Custom directives
        CstShowDirective,

        // Static pages components
        PageNotFoundComponent,
        HelpMePageComponent,
    ],
    imports: [
        CommonModule,
        CstModule.forRoot(),
        OAuthModule.forRoot()
    ],
    providers: [
        { provide: Options, useValue: { store: false } },
        Logger,
        ZoneService,
        CstWindow,
        LOGIN_GUARD_PROVIDER,
        DEFAULT_INTERCEPTOR,
        AutoSaveFactory,
        localStorageProvider(),
        // Custom services
        VCardService,
        BasicLoginService,
        TimeoutService,
        AppConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: startupServiceFactory,
            deps: [AppConfigService],
            multi: true
        }
    ],
    exports: [
        CstModule,
        OAuthModule
    ],
    schemas: []
})
export class CoreModule { }

客户支持模块

import { NgModule } from "@angular/core";
import { CustomerHoldingEnquiryComponent } from "./customer-holding-enquiry/customer-holding-enquiry.component";
import { SharedModule } from "../shared/shared.module";
import { CustomerHoldingErrorReportComponent } from "./customer-holding-error-report/customer-holding-error-report.component";
import { CustHoldingUnvalidatedCinComponent } from "./customer-holding-error-report/unvalidated-cin/ch-unvalidated-cin.component";
import { CustHoldingCinChangeUpdateComponent } from "./customer-holding-error-report/cin-change-update/ch-cin-change-update.component";
import { CustHoldingCisProductUpdateExceptionComponent } from "./customer-holding-error-report/cis-product-update-exception/ch-cis-prdt-update-excptn.component";
import { CustHoldingReconExceptionComponent } from "./customer-holding-error-report/cust-holding-recon-exception/ch-recon-exception.component";
import { CustHoldingProductGroupingExceptionComponent } from "./customer-holding-error-report/cust-holding-product-grouping-exception/ch-prdt-grouping-excptn.component";
import { CustomerHoldingComponent } from "./customer-holding.component";
import { CustomerHoldingService } from "./customer-holding-services/customer-holding-service.service";
import { CustomerHoldingRoutingModule } from "./customer-holding-routing.module";
import { CommonModule } from "@angular/common";

@NgModule({
    declarations:[
        //Enquiry component
        CustomerHoldingEnquiryComponent,
        //Error Report Components
        CustomerHoldingErrorReportComponent,
        CustHoldingUnvalidatedCinComponent,
        CustHoldingCinChangeUpdateComponent,
        CustHoldingCisProductUpdateExceptionComponent,
        CustHoldingReconExceptionComponent,
        CustHoldingProductGroupingExceptionComponent,
        //Base Component
        CustomerHoldingComponent
    ],
    imports:[
        CommonModule,
        SharedModule,
        CustomerHoldingRoutingModule
    ],
    exports:[],
    providers:[CustomerHoldingService],
    schemas: []

})
export class CustomerHoldingsModule{}

产品管理模块

import { NgModule } from "@angular/core";
import { ProductAdminComponent } from "./product-admin.component";
import { ApprovedProductComponent } from "./approved/approved-product.component";
import { PendingActionComponent } from "./pending-action/pending-action.component";
import { ProductAdminService } from "./product-admin-services/product-admin-service.service";
import { SharedModule } from "../shared/shared.module";
import { CanceledProductComponent } from "./canceled/canceled-product.component";
import { PendingApprovalCancellationComponent } from "./pending-approval-cancellation/pending-approval-cancellation.component";
import { ProductAdminRoutingModule } from "./product-admin-routing.module";
import { CommonModule } from "@angular/common";

@NgModule({
    declarations:[
        ProductAdminComponent,
        ApprovedProductComponent,
        CanceledProductComponent,
        PendingActionComponent,
        PendingApprovalCancellationComponent
    ],
    imports:[
        CommonModule,
        SharedModule,
        ProductAdminRoutingModule
    ],
    exports:[],
    providers:[
        ProductAdminService
    ],
    schemas: []

})
export class ProductAdminModule{}

员工模块

import { NgModule } from "@angular/core";
import { RequestManagementComponent } from "./request-management/request-management.component";
import { StaffAuditTrailComponent } from "./staff-audit-trail/staff-audit-trail.component";
import { StaffModuleComponent } from "./staff.component";
import { SharedModule } from "../shared/shared.module";
import { StaffModuleService } from "./staffModuleServices/staff-module.service";
import { StaffRoutingModule } from "./staff-module-routing.module";
import { CommonModule } from "@angular/common";

@NgModule({
    declarations:[
        RequestManagementComponent,
        StaffAuditTrailComponent,
        StaffModuleComponent
    ],
    imports:[
        CommonModule,
        SharedModule,
        StaffRoutingModule
    ],
    exports:[],
    providers:[
        StaffModuleService
    ],
    schemas: []

})
export class StaffModule{}

我在所有延迟加载的模块中仅导入了CommonModule,但是在尝试访问延迟加载的模块时仍然出现错误。

注意:我可以访问作为AppComponent的基本组件和本地路由,但不能访问任何延迟加载的路由。

请帮助!!!

1 个答案:

答案 0 :(得分:1)

好像BrowserAnimationModule引起了问题,因为它已经包含BrowserModule并延迟加载模块。

因此,将您的BrowserAnimationModule移到app.module.ts上,或者可以将其删除并进行测试。