Question

我正在使用具有延迟加载概念的多个模块，但出现以下错误：

错误错误：未被捕获（承诺）：错误：BrowserModule已被加载。如果您需要从延迟加载的模块访问诸如NgIf和NgFor之类的通用指令，请改为导入CommonModule。错误：已加载BrowserModule。如果您需要从延迟加载的模块访问NgIf和NgFor等通用指令，请改为导入CommonModule。

app.module.ts

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

import { AppRoutingModule } from './app.routes';
import { CookieModule } from 'ngx-cookie';
/* Modules */
import { SharedModule } from 'shared/shared.module';

/* Components */
import { AppComponent } from './app.component';
/* Models */
import { User } from './shared/models/user';

// /* Services */
import { GlobalLoader } from './core/global-loader';
import { SecurityService } from './shared/services/security.service';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
   declarations: [
       AppComponent
   ],
   entryComponents: [], // Needed to declare dynamic components
   imports: [      
       BrowserModule,
       AppRoutingModule,
       CookieModule.forRoot(),                          
       SharedModule,
   ],
  exports: [
    SharedModule
  ],
   providers: [SecurityService,
       GlobalLoader,
       User],
   bootstrap: [AppComponent]
})
export class AppModule { }

shared.module.ts

    import { NgModule } from '@angular/core';
// import { FormsModule } from '@angular/forms';
// Small sample component used for dymanic tabs/accordion

/* Components */
import { SampleContent } from './components/sample-content';
import { AccordionCardComponent } from './components/accordion-card/accordion-card.component';
import { BannerComponent } from './components/banner/banner.component';
import { HeaderComponent } from './components/header/header.component';
import { SearchComponent } from './components/search/search.component';
import { TabCardComponent } from './components/tab-card/tab-card.component';
import { TableCardComponent } from './components/table-card/table-card.component';
import { Base64Pipe } from './pipes/base64.pipe';
import { FlexLayoutModule } from '@angular/flex-layout';
import { UXStyleguideModule } from 'ux-angular-styleguide';
import { CommonModule } from '@angular/common';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
// import { RouterModule } from '@angular/router';
/* Shared */
@NgModule({
    declarations: [
        Base64Pipe,
        SampleContent,
        AccordionCardComponent,
        BannerComponent,
        HeaderComponent,
        SearchComponent,
        TabCardComponent,
        TableCardComponent
    ],
    entryComponents: [], // Needed to declare dynamic components
    imports: [
        HttpClientModule,
        FormsModule,
        CommonModule,
        NgxDatatableModule,
        FlexLayoutModule,
        UXStyleguideModule],
    providers: [],
    exports: [
        HttpClientModule,
        FlexLayoutModule,
        NgxDatatableModule,
        FormsModule,
        CommonModule,
        UXStyleguideModule,
        Base64Pipe,
        SampleContent,
        AccordionCardComponent,
        BannerComponent,
        HeaderComponent,
        SearchComponent,
        TabCardComponent,
        TableCardComponent
    ]
})
export class SharedModule { }

而且我无处导入该browserModule，但仍然出现错误。

非常感谢。

Answer 1

在app.module.ts

中

Import {BrowserModule} from '@angular/platform-browser';

在共享模块中：

import { CommonModule } from '@angular/common';

从“共享”中删除BrowserModule。从app.module中删除CommonModule

Answer 2

您必须按照以下步骤进行操作，

1）从App.module删除 CommonModule 并添加到Shared.module

2）从Shared.module中删除 BrowserModule ，并放入App.module

这是一个例子

 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule } from '@angular/forms';

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

import { AppRoutingModule } from './app.routes';
import { CookieModule } from 'ngx-cookie';
/* Modules */
import { SharedModule } from 'shared/shared.module';

/* Components */
import { AppComponent } from './app.component';
/* Models */
import { User } from './shared/models/user';

// /* Services */
import { GlobalLoader } from './core/global-loader';
// import { SecurityService } from './services/security.service';
// import { ServiceGroupService } from './services/service-group.service';

/* Shared */
// import { Base64Pipe } from './shared/base64.pipe';
import { SecurityService } from './shared/services/security.service';
 import { BrowserModule } from '@angular/platform-browser';
// import { RouterModule } from '@angular/router';
@NgModule({
    declarations: [
        AppComponent
    ],
    entryComponents: [], // Needed to declare dynamic components
    imports: [      
        BrowserModule,
        AppRoutingModule,
        CookieModule.forRoot(),
        FormsModule,                    
        SharedModule,
    ],
    providers: [SecurityService,
        GlobalLoader,
        User],
    bootstrap: [AppComponent]
})
export class AppModule { }

和Shared.module

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
// Small sample component used for dymanic tabs/accordion

/* Components */
import { SampleContent } from './components/sample-content';
import { AccordionCardComponent } from './components/accordion-card/accordion-card.component';
import { BannerComponent } from './components/banner/banner.component';
import { HeaderComponent } from './components/header/header.component';
import { SearchComponent } from './components/search/search.component';
import { TabCardComponent } from './components/tab-card/tab-card.component';
import { TableCardComponent } from './components/table-card/table-card.component';
import { Base64Pipe } from './pipes/base64.pipe';
import { FlexLayoutModule } from '@angular/flex-layout';
import { UXStyleguideModule } from 'ux-angular-styleguide';
import { CommonModule } from '@angular/common';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
/* Shared */
@NgModule({
    declarations: [
        Base64Pipe,
        SampleContent,
        AccordionCardComponent,
        BannerComponent,
        HeaderComponent,
        SearchComponent,
        TabCardComponent,
        TableCardComponent
    ],
    entryComponents: [], // Needed to declare dynamic components
    imports: [
        HttpClientModule,
        FormsModule,
        CommonModule,
        NgxDatatableModule,
        FlexLayoutModule,
        UXStyleguideModule],
    providers: [],
    exports: [
        FlexLayoutModule,
        NgxDatatableModule,
        // FormsModule,
        UXStyleguideModule,
        Base64Pipe,
        SampleContent,
        AccordionCardComponent,
        BannerComponent,
        HeaderComponent,
        SearchComponent,
        TabCardComponent,
        TableCardComponent
    ]
})
export class SharedModule { }

Answer 3

shared.module.ts文件的最后一行：

从'@ angular / platform-browser'导入{BrowserModule};

将其删除，错误将消失。

Answer 4

这是因为如果在html文件中使用了* ngFor和* ngIf，则必须导入模块中的import { CommonModule } from '@angular/common';。因此请尝试将其导入模块中。

Answer 5

就我而言，我发现在app-routing-module.ts中导入一些模块loadChildren时，问题就开始了，我仍然不知道如何调整它。

const uint32_t magic_number = BIGENDIAN32(0x12345678);

或

loadChildren: () => import(`./home/home.module`).then(m => m.HomeModule)

Answer 6

如果您使用的是物料模块，请确保删除 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

错误错误：未捕获（承诺）：错误：BrowserModule已加载：angular 6

6 个答案: