缺少 BrowserModule 错误但包含在应用程序模块中答案

【问题标题】：Missing BrowserModule Error but Included in App Module缺少 BrowserModule 错误但包含在应用程序模块中
【发布时间】：2018-04-18 15:00:58
【问题描述】：

当我尝试为我的 Angular 应用程序提供服务时，我收到以下错误

zone.js:642 未处理的承诺拒绝：没有 ErrorHandler。是平台包含模块（BrowserModule）？ ;区域：;任务：Promise.then；值：错误：无错误处理程序。是平台模块（BrowserModule）包括？

但在我的 app.module 中我有

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

import {AppComponent} from './app.component';
import {BsDropdownModule} from 'ngx-bootstrap/dropdown';
import {TabsModule} from 'ngx-bootstrap/tabs';
import {NAV_DROPDOWN_DIRECTIVES} from './shared/nav-dropdown.directive';

import {ChartsModule} from 'ng2-charts/ng2-charts';
import {SIDEBAR_TOGGLE_DIRECTIVES} from './shared/sidebar.directive';
import {AsideToggleDirective} from './shared/aside.directive';
import {BreadcrumbsComponent} from './shared/breadcrumb.component';


// Routing Module
import {AppRoutingModule} from './app.routing';

// Firebase
import {AngularFireModule} from 'angularfire2';
import {AngularFireAuthModule} from 'angularfire2/auth';
import {AngularFireDatabase} from 'angularfire2/database';

// Layouts
import {FullLayoutComponent} from './layouts/full-layout.component';

import {environment} from '../environments/environment';
import {SimpleLayoutComponent} from './layouts/simple-layout.component';
import {AuthService} from './auth/auth.service';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatSliderModule} from '@angular/material/slider';
import {MatTooltipModule} from '@angular/material/tooltip';
import {DragulaModule, DragulaService} from 'ng2-dragula';
import {HttpModule} from '@angular/http';

import {AdminGuard} from './admin-guard.service';


@NgModule({
  exports: [
    MatSliderModule,
    MatTooltipModule,
  ]
})

@NgModule({
  imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatTooltipModule,
    MatSliderModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    ChartsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    HttpModule,

  ],
  declarations: [
    AppComponent,
    FullLayoutComponent,
    SimpleLayoutComponent,
    NAV_DROPDOWN_DIRECTIVES,
    BreadcrumbsComponent,
    SIDEBAR_TOGGLE_DIRECTIVES,
    AsideToggleDirective,
  ],
  providers: [{
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    },
    AngularFireDatabase,
    AuthService,
    DragulaService,
    AdminGuard,

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

在我使用 Angular 4.1.3 之前不会出现此错误，但当我升级到 Angular 5.2 时，我会在浏览器的控制台中收到此错误。我不确定是因为我在此文件中遗漏了某些内容，还是在更新某些内容时导致了错误。

是什么导致了这个错误？

【问题讨论】：

发布整个 app.module.ts

标签： angular

【解决方案1】：

为什么一个类有两个@ngModule装饰器

如果你在同一个类上使用两个装饰器，它们都将应用于该类并以相反的顺序在该类上存储元数据，以便第一个装饰器属性存储在最后一个索引中。当编译器解析元数据时，它会使用 findLast 函数获取最后一个元数据属性，该函数实质上会选择文件中的第一个装饰器属性。
简而言之，只使用第一个装饰器。More here
修改您的应用程序模块，将exports 数组如下所述，这将解决问题。 Docs

@NgModule({
exports: [
    MatSliderModule,
    MatTooltipModule,
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatTooltipModule,
    MatSliderModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    ChartsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    HttpModule,

  ],
  declarations: [
    AppComponent,
    FullLayoutComponent,
    SimpleLayoutComponent,
    NAV_DROPDOWN_DIRECTIVES,
    BreadcrumbsComponent,
    SIDEBAR_TOGGLE_DIRECTIVES,
    AsideToggleDirective,
  ],
  providers: [{
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    },
    AngularFireDatabase,
    AuthService,
    DragulaService,
    AdminGuard,

],
  bootstrap: [ AppComponent ]
})

【讨论】：