Ng Build --prod Error with "Please add a > @Pipe/@Directive/@Component annotation" 消息

Question

在我的 MEAN Stack 应用程序上执行 ng build --prod 时出错。错误信息是：

错误：意外的模块'FlashMessageModule in C:/mean/angular/node_modules/angular-flash-message/dist/flash-message.module.d.ts' 由模块“AppModule”声明 C:/mean/angular/src/app/app.module.ts'。请添加一个 @Pipe/@Directive/@Component 注解。

但是在我的 flash-message.module.ts 我已经声明了 NgModule ：

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

@NgModule({})
export declare class FlashMessageModule {
}

我已经向 app.module.ts 声明了 flash 消息：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from '../material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { ValidateService } from '../services/validate.service';
import { AuthService } from '../services/auth.service';
import { CompanyService } from '../services/company.service';
import { AuthGuard } from './guards/auth.guard';
import { FlashMessageModule } from 'angular-flash-message';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HeaderComponent } from './templates/header/header.component';
import { FooterComponent } from './templates/footer/footer.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './profile/profile.component';
import { DataTracerComponent } from './data-tracer/data-tracer.component';
import { LoggedInComponent } from './snackbar/logged-in/logged-in.component';
import { IndexCompanyComponent } from './company/index-company/index-company.component';
import { CreateCompanyComponent } from './company/create-company/create-company.component';
import { ViewCompanyComponent } from './company/view-company/view-company.component';
import { UpdateCompanyComponent } from './company/update-company/update-company.component';
import { AdminIndexComponent } from './admin/admin-index/admin-index.component';
import { AdminSidenavComponent } from './templates/admin-sidenav/admin-sidenav.component';
import { AdminToolbarComponent } from './templates/admin-toolbar/admin-toolbar.component';
import { AdminUsersComponent } from './admin/admin-users/admin-users.component';
import { AdminCompaniesComponent } from './admin/admin-companies/admin-companies.component';
import { AdminReportComponent } from './admin/admin-report/admin-report.component';
import { AdminGuard } from './guards/admin.guard';
import { AdminComponent } from './admin/admin/admin.component';
import { AdminQuestionerComponent } from './admin/admin-questioner/admin-questioner.component';
import { AdminCreateCompanyComponent } from './admin/admin-companies/admin-create-company/admin-create-company.component';
import { AdminUpdateCompanyComponent } from './admin/admin-companies/admin-update-company/admin-update-company.component';
import { ReportComponent } from './report/report.component';
import { CompanyFilterPipe } from './dashboard/company-pipe.filter';
import { Page404Component } from './error/page404/page404.component';
import { Page403Component } from './error/page403/page403.component';
import { ReportService } from '../services/report.service';
import { ViewReportComponent } from './admin/admin-report/view-report/view-report.component';

const appRoutes:Routes =[
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'header',
    component: HeaderComponent
  },
  {
    path: 'admin',
    component: AdminIndexComponent
  },
  {
    path: 'admin/users',
    component: AdminUsersComponent
  },
  {
    path: 'admin/companies',
    component: AdminCompaniesComponent
  },
  {
    path: 'admin/companies/create',
    component: AdminCreateCompanyComponent
  },
  {
    path: 'admin/companies/update/:id',
    component: AdminUpdateCompanyComponent
  },
  {
    path: 'admin/report',
    component: AdminReportComponent
  },
  {
    path: 'admin/questioner',
    component: AdminQuestionerComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent 
  },
  {
    path: 'profile',
    component: ProfileComponent
  },
  {
    path: 'data-tracer',
    component: DataTracerComponent
  },
  {
    path: 'company',
    component: IndexCompanyComponent
  },
  {
    path: 'company/addCompany',
    component: CreateCompanyComponent
  },
  {
    path: 'company/updateCompany/:id',
    component: UpdateCompanyComponent
  },
  {
    path: 'companies/:id',
    component: ViewCompanyComponent
  },
  {
    path: 'report/:id',
    component: ReportComponent
  },
  {
    path: 'view-report/:id',
    component: ViewReportComponent
  },
  {
    path: 'forbidden',
    component: Page403Component
  },
  {
    path: 'notfound',
    component: Page404Component
  }

]

@NgModule({
  declarations: [
    CompanyFilterPipe,
    AppComponent,
    LoginComponent,
    HeaderComponent,
    FooterComponent,
    DashboardComponent,
    ProfileComponent,
    DataTracerComponent,
    LoggedInComponent,
    IndexCompanyComponent,
    CreateCompanyComponent,
    ViewCompanyComponent,
    UpdateCompanyComponent,
    AdminIndexComponent,
    AdminSidenavComponent,
    AdminToolbarComponent,
    AdminUsersComponent,
    AdminCompaniesComponent,
    AdminReportComponent,
    AdminComponent,
    AdminQuestionerComponent,
    AdminCreateCompanyComponent,
    AdminUpdateCompanyComponent,
    ReportComponent,
    Page404Component,
    Page403Component,
    ViewReportComponent,
    FlashMessageModule
  ],

  imports: [
    HttpModule,
    HttpClientModule,
    FlashMessageModule,
    RouterModule.forRoot(appRoutes),
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
  ],
  providers: [ValidateService, AuthService, AuthGuard, AdminGuard, CompanyService, ReportService],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果在没有 --prod 标志的情况下进行构建，我的浏览器会出错：

Uncaught Error: Unexpected module 'FlashMessageModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.
    at syntaxError (compiler.js:485)
    at compiler.js:15289
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:15271)
    at JitCompiler.push../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._loadModules (compiler.js:34404)
    at JitCompiler.push../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34365)
    at JitCompiler.push../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:34259)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/esm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
    at PlatformRef.push../node_modules/@angular/core/esm5/core.js.PlatformRef.bootstrapModule (core.js:5551)
    at Object../src/main.ts (main.ts:11)

另一个编辑，如果我构建并运行 index.html，它什么也不显示。但是当我检查浏览器的控制台时，它给了我：

加载资源失败：net::ERR_FILE_NOT_FOUND polyfills.js:1 失败 加载资源：net::ERR_FILE_NOT_FOUND styles.js:1 加载失败 资源：net::ERR_FILE_NOT_FOUND vendor.js:1 加载资源失败： net::ERR_FILE_NOT_FOUND main.js:1 加载资源失败： net::ERR_FILE_NOT_FOUND /C:/favicon.ico:1 加载资源失败： 净::ERR_FILE_NOT_FOUND

在 App.Module.ts 上删除 declare 和 FlashMessageModule 后编辑，我在浏览器的日志中得到了这个：

compiler.js:485 Uncaught Error: Template parse errors:
'flash-messages' is not a known element:
1. If 'flash-messages' is an Angular component, then verify that it is part of this module.
2. If 'flash-messages' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <div class="flash-message">
    <mat-card-content>
      [ERROR ->]<flash-messages>
      </flash-messages>
    </mat-card-content>
"): ng:///AppModule/LoginComponent.html@10:6

Answer 1

应该只是

@NgModule({})
export class FlashMessageModule {
}

从上面删除 declare。一个

同时从声明中删除 FlashMessageModule，您应该只在其中包含组件。

Answer 2

你可能错过了从FlashMessageModule导出FlashMessageComponent

@NgModule({})
export declare class FlashMessageModule {
     declarations: [ FlashMessageComponent],
     exports: [ FlashMessageComponent]
}

Answer 3

   @NgModule({})
//if there is espace here please remove it
export class FlashMessageModule {
}